# 개발자도구
브라우저 개발자도구(f12)로 디버깅하기
코드에 console.log를 찍어 개발자도구에서 확인할 경우 파악이 쉽지 않기 때문에 개발자 도구를 이용하여 디버깅을 하는 것이 좋다.
"Chrome DevTools" 업데이트 내용 총 정리 📖
Chrome 117 DevTools 버전에서 새로생긴 기능을 살펴볼게요 개발자 도구에서 API response 수정하기 🦾 mock response headers, web content 를 네트워크 탭에서 자유롭게 다룰 수 있게 되었어요! |구분|스크린 샷|
[figma] VSCode 개발자 도구
피그마를 열심히 만지작 거리다가 올해에 개발자 도구가 새로 생겼다는 것을 알게 되었습니다. 전 단순히 피그마 앱 내부에서 동작하는 것인줄 알았는데, VSCode로 가져갈 수 있는 확장팩을 발견하곤 기쁜 마음에 바로 도전해보았습니다!
크롬 개발자 도구와 IE호환성 잡기 / 버그
내가 짠 스타일이 버그가 생긴다면 CSS파일부터 뒤져보기 but 시간이 오래걸림. 크롬 개발자 도구를 열면 버그 수정이 편하다. 이렇게 봤을 때, 우선 적용중인 스타일을 맨 위에서 보여준다. 그래서 수정할거면 맨 위를 변경.
개발자도구로 Cookies🍪 확인?
로그인을 구현하고 있던 도중 개인적으로 신박했던 부분인지라 포스팅을 하게 되었다.세션(Session)과 쿠키(Cookies)에 대한 것들은 그렇게 많이 들어봤는데 어떤식으로 쿠키가 내 브라우저에 담기게 되는건지? 확인할 수 있다.▼ 1. 개발자도구 open✨macOS
개발자 도구 잘 사용하기
본 코드는 graphql을 통해 클라이언트에서 서버통신을 하는 코드를 바탕으로 작성되었다!맥: option + command + i윈도우: html, css 를 디버깅 할 수 있는 탭내 vsc 코드를 바꾼 후 새로고침해서 결과를 일일히 확인하는 것이 아닌 개발자 도구의
개발자도구를 활용한 에러 점검
html,css 문제발생 => 개발자도구 element 창에서 수정해보며 체크 (처음엔 개발자도구로 확인, 이후 vscode로 최종적용)js 문제 발생 => 개발자도구 console 창에서 체크하면서 확인네트워크 상 문제발생 개발자도구 Network 에서 에러 rech
간단하게 개발자 도구 살펴보기 콘솔편 [개발자 도구1]
간단하게 개발자 도구 살펴보기 콘솔편 이번 포스팅에서 개발자 도구의 정의와 개발자 도구의 사용법을 알아봅시다.
웹 퍼블리싱 정리
Figma, Photoshop 등 그래픽 리소스를 html + css + js 로 변환해 브라우저에 표현하는 것.디자인 리소스 : Photoshop, PowerPoint 와 같이 전통적인 툴에서 Sketch, Zeplin, Figma, Protopie 처럼 최근 많
[JS] 개발자 도구
개발자 도구에 있는 다양한 패널의 종류와 기능을 파악한다.개발자 도구는 브라우저에서 제공하는 하나의 tool이다. ex) Chrome 개발자 도구, IE 개발자 도구, Safari 개발자 도구 등웹 사이트를 즉각적으로 수정하고 문제 발생 시 원인을 파악하여 빠른 속도로
[기타] 개발자도구 - Application panel
브라우저 저장소의 기능현재 로딩된 웹 페이지에서 사용된 모든 리소스를 검사할 수 있는 패널(이미지, DB, 로컬 및 세션 스토리지, 쿠키, 애플리케이션 캐시 등)Storage: 브라우저의 저장소Local Storage: 로컬스토리지의 데이터는 사용자가 지우지 않는 이상
[기타] 개발자도구 - Network panel
http 네트워크 통신 정보API 크롤링, 페이지 로딩 성능 테스트(리소스 가져오는 순서, 시간, 요청과 응답)이미지, 영상 등의 소스 (mock data 활용) \-> 웹페이지와 서버 사이에서의 데이터의 흐름을 분석preview를 통해 보면 다음과 같은 항목을 API
[기타] 개발자도구 - Console panel, Sources panel
Console panel 자바스크립트 코드 즉시 실행 디버깅 console 창에서 다음 줄에 코드를 작성하고 싶을 때 enter 대신 shift+enter이용 console 창에 여러줄 있을 때 마지막 줄이 return 된다. 다른 pane