# DevTool

13개의 포스트
post-thumbnail

React 성능 최적화하기

React에서 성능 최적화는 가장 중요한 요소 중 하나이다.토이프로젝트를 위해 최적화를 하는 방법을 찾아보다 React Developer Tools에 있는 Profiler라는 기능을 알게되었다, React Developer Tools은 오픈소스 React JavaScr

4일 전
·
0개의 댓글

chrome devtools network 탭 waterfall 항목들

chrome devtools의 network탭을 보면 waterfall이 다채로운 색과 함께 늘어져있는 걸 볼 수 있다. hover하면 나타나는 tooltip에서 각 항목들이 의미하는 바와 time이 어떤 항목들로 계산된 값인지 기록해보고자 한다.(시간으로 표기되는 항

2022년 2월 4일
·
0개의 댓글
post-thumbnail

Chrome Devtools - Sources

Chrome Devtools의 Sources 탭을 알아보자

2021년 12월 19일
·
0개의 댓글
post-thumbnail

Chrome Devtools - Mobile Simulation

Chrome Devtool의 모바일 시뮬레이션 방법을 알아보자!

2021년 12월 12일
·
0개의 댓글
post-thumbnail

Chrome Devtools - Console + Console API

Chrome Devtools의 Elements 탭을 알아보자

2021년 12월 6일
·
0개의 댓글
post-thumbnail

Chrome Devtools - Elements

Chrome Devtools의 Elements 탭을 알아보자

2021년 12월 3일
·
0개의 댓글
post-thumbnail

[JS30] - 9) Dev Tools Domination

Interpolated Styled Warning Error Info ![](https://images.velog.io/images/gygy/post/c5a721ba-a023-42d3-b414-

2021년 10월 25일
·
0개의 댓글

SourceMap이란 무엇일까?(with webPack devtool)

보통 페이지를 표시하기위한 JS 코드와 css 같은 파일들은 webpck과 같은 도구를 이용해 번들링 되어 난독화되고 압축됩니다. 보다 서버에서 빠르게 전달되고 보안성을 높이기 위해서 이러한 난독화와 압축이 사용되는데 이럴경우 페이지에서 에러가 발생할 시 디버깅하기가

2021년 9월 13일
·
0개의 댓글
post-thumbnail

TIL. DevTool( Application)/wecode

🍰 케이크팀 - Application panel - Application 패널의 기능은? 브라우저 저장소 Local storage, Session Storage, Cookie - Local Storage, Session Storage, Cookie 차

2021년 7월 9일
·
0개의 댓글
post-thumbnail

TIL. 크롬 개발자 도구 (element, network, console, application)

Elements html 코드를 분석하고 수정할 수 있는 도구 패널이다. Dom과 css를 자유롭게 조작하여 사이트의 레이아웃과 디자인을 테스트 할 수 있다.

2020년 8월 21일
·
0개의 댓글
post-thumbnail

DevTools

프론트엔드를 잘하기 위한 필수 마스터과정 Devtool(개발자도구)를 알아보자 ㄹ

2020년 7월 29일
·
0개의 댓글
post-thumbnail

성능 최적화 하기.

chrome developer tools 로 성능 확인하기 => inspector => performace => record (녹화버튼) 클릭.. => 원하는 Action 완료후 멈춤.Timing 이라는 곳에 들어가서 확인

2020년 6월 13일
·
0개의 댓글

#TIL wecode Bootcamp Day 4(DevTool)

Google Chrome DevTool

2020년 5월 29일
·
0개의 댓글