Chrome 개발 도구의 숨겨진 기능

만약 당신이 웹 개발자라면, 브라우저 개발 도구나 웹 컨트롤러를 돌아다니는 데 많은 시간을 들일 것입니다.요소를 검사하거나 CSS를 수정하거나 컨트롤러에서 명령을 실행하는 것은 모든 웹 개발자들이 브라우저 개발 도구를 어떻게 사용하는지 알고 있는 기본적인 일이다.그러나 디버깅, 개발, 웹 디자인을 더욱 효율적으로 하기 위해 브라우저에서 더 많은 일을 할 수 있습니다.여기에 숨겨져 있거나 잘 알려지지 않은 크롬 개발 도구의 기능이 있습니다. 당신은 매일 이런 기능을 사용할 것이라는 것을 알아야 합니다...

테이블 형식으로 배열 인쇄

JavaScript를 사용하여 대량의 데이터 (예를 들어 데이터 시각화 만들기) 를 처리할 때, 첫 번째 시도는 영원히 성공하지 못할 것입니다. 웹 컨트롤러로 돌아가서 데이터를 보아야 합니다. console.log 를 사용해야 할 수도 있습니다.그러면 JSON(JavaScript Object)이 생성되고 2D 배열에서는 하드 읽기가 가능하며 유용한 정보를 찾기 어렵습니다.그러나 간단한 해결 방법이 하나 있다.
console.log을(를) console.table로 교체하기만 하면 됩니다.이 함수는 1D와 2D 배열을 쉽게 표시할 수 있지만, 이 함수를 특히 유용하게 하는 것은 열 이름을 정확하게 표시할 수 있고, 이 열의 모든 열을 정렬할 수 있다는 것이다.따라서 위의 테이블과 유사한 형식의 데이터를 사용해야 합니다.

[
  { "country": "Austria", "percentage": 11.6429, "year": 2012},
  { "country": "Belgium", "percentage": 8.5718, "year": 2012},
  { "country": "Czechia", "percentage": 3.1569, "year": 2012},
  { "country": "Denmark", "percentage": 13.0096, "year": 2012},
  { "country": "Estonia", "percentage": 8.3903, "year": 2012},
  { "country": "Finland", "percentage": 23.3728, "year": 2012},
  { "country": "France", "percentage": 10.1641, "year": 2012},
  { "country": "Germany", "percentage": 7.4749, "year": 2012},
  { "country": "Greece", "percentage": 9.2186, "year": 2012},
  { "country": "Hungary", "percentage": 10.4749, "year": 2012},
  { "country": "Iceland", "percentage": 13.9053, "year": 2012}
]

다중 커서 사용

모든 코드 편집기에서 가장 기본적인 기능과 단축키 중 하나는 다중 커서와 다중 선택이다.만약 네가 나처럼 가능한 한 효율적이라고 생각한다면, 너는 반드시 이런 지름길을 잘 이용할 것이다.
다중 커서 사용CTRL + Click:

대량의 텍스트를 선택하고 교체해야 할 때 다중 커서가 도움이 되지만 정확하지 않고 번거롭습니다.이 경우 더 적합한 CTRL + D 바로 가기를 사용할 수 있습니다.

위의 GIF에서는 텍스트를 쉽게 수정하거나 교체하기 위해 CTRL + D 를 선택하거나 CTRL + U 선택을 취소하는 방법을 볼 수 있습니다.

명령 팔레트 사용

Chrome 개발 도구에는 많은 도구, 옵션 카드, 파일, 명령 등이 있습니다. 모든 도구의 이름이나 위치를 기억하면 안 될 수도 있습니다.이를 실현하기 위해 명령 팔레트를 사용할 수 있습니다. 이 팔레트는 CTRL + Shift + P 로 열 수 있습니다.이 팔레트에서는 모든 단축키, 패널, 콘솔 설정, 탭, 설정 등을 찾을 수 있습니다.

또한 이 단축키에서 Shift 를 생략하고 CTRL + P 를 사용하면 사용할 수 있는 모든 파일 목록을 열 수 있습니다.만약 당신의 사이트에 원본 파일이 매우 많다면, 이것도 매우 편리하다.

편리한 색상 선택기

나는 CSS에서 글씨체, 색깔 등을 끊임없이 방해하고 조정하는 유일한 사람이 아닐 수도 있다.최소한 색상 조정이 쉽도록 색상 선택기를 사용해야 할 수도 있습니다. 변경할 색상 요소를 찾고 CSS 색상 필드를 클릭하여 이 선택기를 열 수 있습니다.
이것은 좋은 기능이지만 진정한 게임 규칙 변경자는 사이트에서 어떤 색을 선택하든지 클릭만 하면 색 선택기가 켜집니다. - 이렇게:

암흑 모드

위의 캡처와 GIF에서 Chrome 개발 도구에서 짙은 색 모드를 사용한 것을 알 수 있습니다.따라서 연한 색상 모드에서 진한 색상 모드로 변경하는 방법을 알고 싶으면 DevTools의 오른쪽 상단 모서리로 이동하여 수직 점 아이콘 3개를 클릭한 다음 추가 도구를 선택한 다음 설정을 선택할 수 있습니다.'설정'메뉴에서'기본설정'을 선택하고 마지막으로'주제'를'짙은 색'으로 설정합니다.그렇습니다!어둠의 면에 오신 걸 환영합니다!

CSS 속성을 정의하는 위치 찾기

CSS를 사용하려면 IDE에서 코드를 편집하고 브라우저 탭을 새로 고치는 것보다 많은 시도와 오류가 필요합니다. 왜 시간을 절약하지 않고 DevTools에서 이 모든 것을 완성합니까?시간 절약 방법 중 하나는 소스 파일에서 편집할 수 있도록 CSS 속성의 정의 위치를 찾는 것입니다CTRL + Click.

디자인 모드를 사용하여 웹 사이트를 편집할 수 있도록 하다

또 다른 CSS/디자인 기법은 디자인 모델을 이용하여 사이트의 모든 내용을 직접 편집하는 것이다.HTML 및 CSS 소스 파일을 수정할 필요가 없습니다. - 페이지의 내용을 클릭하거나 강조 표시하고 변경하기만 하면 됩니다!이 모드를 열려면 콘솔에 document.designMode = "on" 를 입력하고 설계를 시작하십시오.

조건 브레이크

IDE를 사용하여 브라우저에서 실행되는 JavaScript를 올바르게 디버깅하는 것은 일반적으로 상당히 어렵거나 괴롭습니다.따라서 IDE를 사용하지 않고 DevTools 디버거를 사용합니다.
디버거에 기본 인터럽트를 설정하는 것은 결코 재미있지 않으니, 너희들은 틀림없이 어떻게 하는지 알고 있을 것이다.그런데 조건이 끊겼어요?때때로, 이 순환은 1000개 이상의 기록을 교체할 수 있으며, 어떤 조건을 충족시킬 때만 오류가 발생할 수 있습니다. 예를 들어 상기 순환 중의 if 문장이 false 로 되돌아올 때입니다.이 조건이 충족될 때만 중단점에서 멈추도록 조건 중단점을 설정할 수 있습니다.

먼저 기존 브레이크 (빨간색 점) 를 마우스 오른쪽 버튼으로 클릭한 다음 브레이크 편집을 클릭하고 필요한 표현식을 삽입합니다.이 표현식의 계산 결과가 true 일 때 중단점을 촉발하여 탐색할 기회가 있습니다.이 조건의 단점은 if 문장을 포함하는 줄에만 추가할 필요가 없다. 코드가 통과될 때마다 표현식을 계산할 수 있다.
실행을 멈추는 동안 버그를 사방으로 찾을 때, 값이 바뀔 때 감시할 수 있도록 의심스러운 변수를 추가할 수도 있습니다.모니터링할 변수를 추가하려면 다음과 같이 하십시오.

아날로그 저속 인터넷

대부분의 사람들은 DevTools의 네트워크 탭을 알고 있으며, 함수, 작업, 파일을 불러오는 데 얼마나 걸릴지 볼 수 있다.그러나 대부분의 사람들이 모르는 것은 네트워크 옵션 카드를 사용하여 네트워크 흐름을 절약하는 느린 인터넷 연결을 시뮬레이션할 수 있다는 것이다.이 작업을 수행하는 방법은 다음과 같습니다.

이 프로필을 추가하고 선택하면 페이지를 새로 고쳐서 나쁜 인터넷 연결에서 나타나는 모습을 볼 수 있습니다.조심해라. 이것을 시도해 봐라. 당신의 사이트가 정말 얼마나 느린지 깨닫게 될 것이다.

웹 사이트 성능 평가

성능에 대해 이야기할 때, 크롬 개발 도구가 응용 프로그램 평가에 있어서 우리를 위해 무엇을 할 수 있는지 토론해 봅시다.탐색기를 실행하려면 DevTools의 Performance 탭으로 전환해야 합니다.이 옵션 카드에서 CTRL + Shift + E만 누르면 됩니다.이 단축키는 탐색기를 시작하고 페이지를 새로 고칠 수 있습니다.페이지를 불러오면 탐색기 기록을 멈추기 위해 같은 단축키를 다시 눌러야 합니다.

여기서 우리는 인터넷 성능, 애니메이션, 기능 시간 등을 깊이 있게 이해할 수 있다. 당신이 볼 수 있는 것은 매우 많지만, 그 중 하나는 특히 기능 검사 시간을 계산한다.일부 기능을 확인하려면 그림의 주황색 막대를 클릭하고 밑에 있는 밑바닥 탭을 선택하십시오.만약 전체 시간에 따라 그것들을 정렬한다면, 코드의 일부분은 완성하는 데 아주 적은 시간이 걸릴 수 있습니다.

결론

이것들은 단지 내가 가장 좋아하는 힌트와 기교일 뿐이다. 이것은 크롬 개발 도구의 모든 기능의 상세한 목록이 아닐 것이다.워크플로우에 적합한 유용한 기능은 Chrome DevTools Guides 에서 많이 찾을 수 있습니다.또한 What's new section의 최신 업데이트를 주목하는 것이 브라우저에 더 많은 유용한 도구를 가져다 줄 것입니다.
만약 특정한 기능이 부족하다면, 구글과 사용자 커뮤니티에 추가 도구를 제공하기 때문에 DevTools extensions on Chrome Webstore 검사할 필요가 있습니다.특정 문제에 대한 도구/확장을 찾지 못하면, Extending DevTools 강좌를 사용하여 스스로 구축할 수 있습니다.😉