알아야 할 10가지 Chrome 콘솔 팁

웹사이트 또는 웹 애플리케이션과 해당 사용자 인터페이스를 테스트하는 것은 까다롭고 시간이 많이 소요될 수 있습니다. 특히 Chrome 개발자 도구라고도 하는 Chrome 콘솔과 같은 적절한 디버깅 도구를 사용하지 않는 경우에는 더욱 그렇습니다.

이제 거의 모든 웹 브라우저가 개발자 도구를 지원하지만 Google은 빠른 디버깅 프로세스를 위한 최상의 환경을 제공하는 데 더 결정적인 역할을 하는 것 같습니다.

Google은 Chrome DevTools를 가능한 한 개발자 친화적으로 만들기 위해 정말 열심히 노력했습니다. 더 이상 Google Chrome 브라우저에 직접 내장된 이러한 개발자 도구를 사용하여 할 수 있는 일이 아닙니다. 이제 크롬 콘솔에 대해 얼마나 알고 있느냐의 문제입니다.

모든 개발자를 매료시키는 특정 Chrome 콘솔 기능이 있습니다. 일부는 스크립트와 스타일을 포함하여 웹사이트의 일부가 어떻게 구성되어 있는지 찾는 데 최고의 개발자 도구라고 생각합니다. 다른 개발자는 링크 태그, 브라우저 렌더링, HTTP 요청 및 응답, 페이지 중단 지점, 새로운 기능 또는 스크립트 테스트 등을 추적하는 데 더 유용하다고 생각합니다.

이 기사에서는 콘솔로 수행할 수 있는 작업의 표면을 거의 긁지 않을 것입니다. 기능 및 설명서에 대한 전체 개요를 보려면 공식 Google 개발자 페이지로 이동하십시오.

Chrome 콘솔을 여는 방법

Chrome DevTools에 액세스하는 일반적인 방법은 Google Chrome 맞춤설정 및 제어 버튼(Chrome 브라우저 메뉴 모음의 오른쪽 상단에 있는 세로 점 3개)을 클릭하고 아래로 스크롤하여 더 많은 도구 를 찾아 개발자 도구 를 선택하는 것입니다.

키보드 단축키: Windows의 경우 Ctrl + Shift + I, Macintosh의 경우 Cmd + Options + I.

또는 웹사이트의 요소를 마우스 오른쪽 버튼으로 클릭하고 요소 검사 옵션을 선택하여 Chrome 콘솔에 액세스할 수 있습니다.

위에서 언급한 방법 중 하나를 사용하는 경우 Chrome 콘솔 패널이 브라우저 창의 측면 또는 하단에 나타납니다. chrome 콘솔 패널을 별도의 창으로 잠금 해제하거나 Devtools 사용자 정의 및 제어 버튼(DevTools 패널의 오른쪽 상단 모서리에 있는 세 개의 수직 점)을 클릭하고 Dock 측면 옵션 옆에 원하는 위치를 선택하여 독 위치를 변경할 수 있습니다. .

모든 개발자가 알아야 할 10가지 Chrome 콘솔 도움말

1. 모바일 장치 시뮬레이션

웹사이트 테스트의 가장 중요한 측면 중 하나는 페이지 디자인의 반응성과 다양한 장치에 대한 한계점을 확인하는 것입니다. 크롬 DevTools를 사용하여 미디어 쿼리를 테스트하거나 웹사이트가 중단되는 해상도를 찾아 다양한 모바일 장치를 시뮬레이션하여 미디어 쿼리를 적용할 위치를 설정할 수 있습니다.

다양한 모바일 장치를 시뮬레이션할 수 있는 Chrome 콘솔 장치 모드에 액세스하려면 Chrome 콘솔 패널의 왼쪽 상단 모서리에 있는 토글 장치 도구 모음(작은 전화 및 태블릿 아이콘)을 클릭합니다. 이렇게 하면 웹 사이트 창이 반응형 모드로 변경됩니다.

키보드 단축키: Ctrl + Shift + M(Cmd + Shift + M).

웹사이트 창에 나타나는 일련의 도구를 사용하면 시뮬레이션할 장치와 해상도를 선택하고 목록에 없는 모바일 장치를 추가할 수 있습니다.

2. 네트워크 활동 검사

Chrome 콘솔을 사용하면 웹사이트의 네트워크 활동을 검사하여 모든 리소스가 정확하게 다운로드 및 업로드되고 있는지 확인할 수 있습니다. 또한 이미지 크기, 콘텐츠, HTTP 헤더 등과 같은 각 리소스의 속성을 검사합니다.

DevTools 창에서 네트워크 탭을 클릭합니다. 도구는 열려 있는 동안에만 네트워크 활동을 기록하기 때문에 빈 로그가 있는 네트워크 패널이 열립니다. Ctrl + R(Cmd + R)을 누르거나 웹사이트를 새로고침하여 페이지 네트워크 로그 활동을 봅니다.

페이지 아래에 페이지의 네트워크 활동에 대한 시간순 로그를 보여주는 표가 표시되어야 합니다. 각 리소스에 대한 자세한 정보를 보려면 네트워크 설정(오른쪽의 톱니바퀴 아이콘)을 클릭하고 큰 아이콘 요청 행 사용 옆의 확인란을 선택합니다.

파일 압축과 같은 문제를 해결하기 위해 네트워크 로그의 오류를 디버깅하여 페이지의 로드 성능을 향상시킬 수 있습니다.

3. 네트워크 조절

모바일 장치 시뮬레이션과 유사하게 Chrome 콘솔을 사용하여 다양한 인터넷 속도를 시뮬레이션할 수 있습니다. 이 기능은 예를 들어 3G 모바일 장치에서 특정 속도로 웹사이트 성능을 테스트하려는 경우에 유용할 수 있습니다.

네트워크 패널 메뉴 표시줄에서 온라인(조절)을 클릭하고 원하는 인터넷 속도를 선택합니다. 사용자 지정 네트워크 프로필을 추가하려면 드롭다운 메뉴에서 추가 옵션을 클릭하고 원하는 업로드 및 다운로드 속도를 입력합니다.

4. 스크립트 스니펫 추가

스니펫 기능을 사용하여 웹사이트 내 원하는 곳에 원하는 임의의 코드를 추가할 수 있습니다. 같은 코드를 반복해서 작성하는 대신 이 기능을 사용하면 스니펫을 저장하고 원할 때마다 코드에 액세스할 수 있습니다.

소스 탭 >> 스니펫 >> 새 스니펫을 클릭합니다. 그러면 스니펫 창에 새 파일이 생성됩니다. 스니펫의 이름을 바꾸고 창 옆에 있는 창 안에 작은 JavaScript 코드 블록을 작성합니다. 스니펫을 저장하려면 스니펫 파일을 마우스 오른쪽 버튼으로 클릭하고 다른 이름으로 저장을 클릭한 다음 원하는 디렉토리를 선택합니다. 명령 메뉴를 통해 이 기능에 액세스할 수도 있습니다.

Ctrl + Shift + P 또는 Cmd + Shift + P(Mac)를 사용하여 명령 메뉴를 열고 스니펫을 입력한 다음 새 스니펫 생성 을 클릭합니다.

Ctrl + Enter 또는 Cmd + Enter를 사용하여 코드를 실행하거나 텍스트 창 아래에 있는 Run Snippet 아이콘을 클릭하십시오.

5. 웹사이트 스크린샷 찍기

Chrome DevTools를 사용하면 웹사이트의 여러 부분에 대한 스크린샷을 찍을 수 있습니다. Ctrl + Shift + P 또는 Cmd + Shift + P(Mac)를 사용하여 명령 메뉴를 열고 스크린샷 을 입력합니다. 원하는 스크린샷 유형을 선택합니다. DevTool은 자동으로 스크린샷을 찍고 이미지를 .png 파일로 기본 다운로드 디렉토리에 다운로드합니다.

6. 콘텐츠 텍스트 편집 모드 켜기

Chrome 콘솔을 사용하여 브라우저 창에서 직접 페이지 콘텐츠를 편집할 수 있습니다. 콘솔 탭을 클릭하고 다음 코드를 사용하여 기능을 켭니다.

document.body.contentEditable = '참';

또는

document.designMode='켜기';

Enter 키를 눌러 기능을 켭니다.

7. 색상 선택기

다양한 도구가 있는 색상 선택기를 사용하여 웹사이트에서 색상을 더 쉽게 조작할 수 있습니다. 스포이드를 사용하면 웹 페이지에서 직접 색상을 선택하고 색상 속성에서 설정할 수 있습니다. 색상 선택기를 사용하여 색상의 색조와 불투명도를 조정하고 간단한 클릭으로 RGBA, HEX 및 HSLA 간에 변환할 수 있습니다.

색상 선택기에 액세스하려면 색상을 변경할 요소를 선택합니다. 그러면 오른쪽에 있는 요소 탭과 스타일시트 창이 열립니다. 요소 CSS 속성을 찾고 적절한 색상 상자를 클릭하여 색상 선택기를 엽니다.

8. CSS 속성 편집

Chrome 콘솔을 사용하면 웹사이트에 있는 모든 요소의 CSS 속성을 쉽게 조정할 수 있습니다. 선택 버튼(Ctrl + Shift + C 또는 Cmd + Options + C)을 클릭하고 요소 속성의 개요를 보려면 편집하려는 요소에 커서를 놓고 요소를 클릭합니다.

이렇게 하면 요소 창 아래에 있는 요소의 HTML 루트와 DevTools 패널의 오른쪽에 있는 CSS 속성이 강조 표시되어야 합니다. 스타일 창으로 이동하여 실시간 변경을 위해 편집하려는 속성으로 스크롤합니다. 속성을 Ctrl + 클릭(Cmd + 클릭)하면 스타일의 전체 속성을 볼 수 있습니다.

9. 자바스크립트의 한계점

console.log() 메서드보다 중단점을 사용하여 JavaScript 오류를 찾고 수정하는 것이 훨씬 쉽습니다. 후자의 방법에서는 수동으로 소스 코드에 액세스하고 해당 코드에 console.log() 문을 삽입한 후 페이지를 다시 로드하여 로그를 검토해야 하기 때문입니다. 중단점은 관련 코드에서 일시 중지하기 전에 반드시 코드 구조를 이해해야 하는 것은 아닙니다.

소스 탭 > 페이지를 클릭하고 특정 폴더에서 디버그할 스크립트를 선택합니다. 스크립트를 일시 중지하려는 줄 번호를 클릭하여 해당 줄에서 실행되는 즉시 일시 중지하도록 Chrome DevTools에서 중단점을 설정할 수 있습니다.

또는 디버거 창에서 이벤트 리스너를 사용하여 마우스 클릭 또는 미디어 재생과 같이 스크립트에서 대상으로 하는 특정 이벤트를 참조하여 중단점을 설정할 수 있습니다. Ctrl + R(Cmd + R)을 사용하여 페이지를 새로 고치고 디버거 창 도구를 사용하여 단계를 이동합니다.

10. HTML 요소를 전역 JS 변수로 저장

콘솔에 기록된 복잡한 개체를 검사하든 사이트의 DOM 요소를 검사하든 관계없이 해당 개체에 대한 참조를 전역적으로 자동으로 저장할 수 있습니다. 전역 변수로 간단히 검사할 수 있으므로 디버깅할 때 매우 편리합니다.

콘솔의 개체 또는 요소 탭의 요소 HTML 블록을 마우스 오른쪽 버튼으로 클릭하고 드롭다운 메뉴에서 "전역 변수로 저장"을 선택합니다. Chrome 콘솔은 자동으로 요소를 전역 변수로 저장하고 콘솔에서 사용할 수 있도록 합니다. 변수 이름은 "tempN"이 됩니다. 여기서 N은 이 방법을 사용하여 변수를 저장한 횟수를 나타냅니다. 첫 번째 변수의 이름은 분명히 "temp1"이고 두 번째 변수는 "temp2"입니다.

결론

숙련도와 속도는 도구에 대한 친숙함의 속성이며, 이는 Chrome DevTools에 깊숙이 적용됩니다. 정보가 많을수록 도구를 더 빠르고 빠르게 사용할 수 있으므로 디버깅에 소요되는 시간이 줄어듭니다.

이번 주에 약간의 시간을 할애하고 다음으로 가장 많은 시간이 소요되는 디버깅 측면부터 시작하여 설명서를 읽는 것이 더 가치가 있습니다. 위에서 언급한 크롬 콘솔 팁에서 가장 좋아하는 기능을 언급하지 않아도 놀라지 않을 것입니다. 아래 의견에 대해 알려주십시오.