Chrome에서 JavaScript 디버거를 어떻게 시작합니까?

Chrome을 사용할 때 JavaScript 코드를 디버깅하고 싶습니다. 어떻게해야합니까?

윈도우 : CTRL- SHIFT- J또는 F12

맥 : ⌥- ⌘-J

공구 모양 메뉴 (도구> JavaScript 콘솔)를 통해서도 사용할 수 있습니다.

이것을 소스에 추가하십시오.

debugger;

모든 브라우저가 아니라면 대부분 작동합니다. 코드의 어딘가에 배치하면 중단 점처럼 작동합니다.

Windows 및 Linux :

Ctrl개발자 도구를 여는 + Shift+ I키

Ctrl+ Shift+ J개발자 도구를 열고 콘솔에 집중하십시오.

Ctrl+ Shift+ C요소 검사 모드를 전환합니다.

맥:

⌥개발자 도구를 여는 + ⌘+ I키

⌥+ ⌘+ J개발자 도구를 열고 콘솔에 집중하십시오.

⌥+ ⌘+ C요소 검사 모드를 전환합니다.

출처

다른 단축키

F12Chrome 브라우저에서 기능 키를 눌러 JavaScript 디버거를 시작한 다음 "스크립트"를 클릭하십시오.

상단의 JavaScript 파일을 선택하고 JavaScript 코드의 디버거에 중단 점을 배치하십시오.

Ctrl+ Shift+ J개발자 도구를 엽니 다.

Mac의 Chrome 8.0.552에서는 메뉴 보기 / 개발자 / 자바 스크립트 콘솔 에서이 항목을 찾 거나 Alt+ CMD+를 사용할 수 있습니다 J.

여기에서 개발자 도구에 액세스 할 수있는 바로 가기를 찾을 수 있습니다.

https://developer.chrome.com/devtools/docs/shortcuts

Shift+ Control+ I개발자 도구 창을 엽니 다. 왼쪽 아래에서 두 번째 이미지 (다음과 같이)가 콘솔을 열거 나 숨 깁니다.

전용 '콘솔'패널을 열려면 다음 중 하나를 수행하십시오.

• 키보드 단축키 사용
  • Windows 및 Linux : Ctrl+ Shift+J
  • Mac : Cmd+ Option+J
• Chrome 메뉴 아이콘, 메뉴-> 추가 도구 -> JavaScript 콘솔을 선택하십시오 . 또는 Chrome 개발자 도구가 이미 열려 press있는 경우 '콘솔'탭.

여기를 참조 하십시오

Mac 사용자의 경우 Chrome-> 메뉴 보기 -> 개발자 -> JavaScript 콘솔로 이동하십시오 .

이제 Google 크롬에 새로운 기능이 도입되었습니다. 이 기능을 사용하여 크롬 탐색에서 코드를 편집 할 수 있습니다. (코드 위치에 대한 영구적 인 변경)

이를 위해 F12-> 소스 탭-(오른쪽)-> 파일 시스템-을 눌러 코드 위치를 선택하십시오. 그런 다음 크롬 브라우저가 허가를 요청하고 그 코드가 녹색으로 싱크됩니다. 코드를 수정할 수 있으며 코드 위치에도 반영됩니다 (영구적으로 변경됨)

감사

내가 자바 스크립트 디버거에 도달하는 가장 효율적인 방법은 다음을 실행하는 것입니다.

chrome://inspect

F12 는 개발자 패널을 엽니 다

CTRL + SHIFT + C 마우스를 가져 가면 요소를 강조 표시하는 마우스로 검사 도구가 열리고 클릭하면 요소 탭에 표시 할 수 있습니다.

CTRL + SHIFT + I 콘솔 탭이있는 개발자 패널을 엽니 다

오른쪽 클릭> 검사 요소를 마우스 오른쪽 단추로 클릭하고 "검사"를 클릭하여 개발자 패널의 요소 탭에서 선택합니다.

ESC 요소 또는 이와 유사한 요소를 마우스 오른쪽 단추로 클릭하고 검사하여 DOM을 보는 "요소"탭에서 종료되면 ESC 를 눌러 콘솔을 위아래로 전환 할 수 있습니다. 두 가지를 모두 사용하는 것이 좋습니다.

이것들은 당신이 보는 도구입니다

눌러 F12

Chrome 콘솔에서 할 수 있습니다 console.log(data_to_be_displayed).