source

Google Chrome에서 JavaScript 디버거를 시작하려면 어떻게 해야 합니까?

factcode 2022. 10. 13. 23:37
반응형

Google Chrome에서 JavaScript 디버거를 시작하려면 어떻게 해야 합니까?

Google Chrome을 사용할 때 JavaScript 코드를 디버깅하고 싶습니다.내가 어떻게 그럴 수 있을까?

소스에 추가해 보세요.

debugger;

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

Windows:SHIFTJ --또는 F12

Mac: --J

렌치 메뉴([Tools]> [ JavaScript Console ])에서도 사용할 수 있습니다.

JavaScript 콘솔 메뉴

Windows 및 Linux:

Ctrl + + 키를 눌러 개발자 도구 열기

Ctrl + + - 개발자 도구를 열고 콘솔에 초점을 맞춥니다.

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

Mac:

+ + 키를 눌러 개발자 도구 열기

+ + - 개발자 도구를 열고 콘솔에 초점을 맞춥니다.

+ + - 검사 요소 모드를 전환합니다.

원천

기타 숏컷

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

위에 있는 JavaScript 파일을 선택하고 JavaScript 코드의 디버거에 브레이크 포인트를 배치합니다.

Ctrl + + 를 누르면 개발자 도구가 열립니다.

Mac의 Chrome 8.0.552에서는 View/Developer/JavaScript Console... 메뉴에서 찾을 수 있습니다.++CMDJ 를 사용할 수도 있습니다.

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

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

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

콘솔 표시

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

  • 키보드 단축키 사용
    • Windows 및 Linux의 경우: + +
    • Mac: + +
  • [ Chrome Menu ]아이콘 메뉴 -> [ More Tools ]-> [ JavaScript Console ]를 선택합니다.또는 Chrome Developer Tools가 이미 열려 있는 경우,press콘솔' 탭을 클릭합니다.

여기를 참조해 주세요

이제 구글 크롬은 새로운 기능을 도입했다.이 기능을 사용하면 Chrome Browse에서 코드를 편집할 수 있습니다.(코드 위치 영구 변경)

F12 --> Source 탭 -- (오른쪽) --> File System (파일 시스템) 을 누릅니다.그 안에서, 코드의 위치를 선택해 주세요.그 후 크롬 브라우저가 허락을 구하고 그 후 코드가 녹색으로 가라앉습니다.그리고 코드를 수정하면 코드 위치도 반영됩니다(영구적으로 변경됩니다).

감사해요.

Mac 사용자의 경우 Google Chrome --> 메뉴 보기 --> 개발자 --> JavaScript 콘솔로 이동합니다.

스크린샷

Javascript 디버거에 접속하는 가장 효율적인 방법은 다음을 실행하는 것입니다.

chrome://inspect

F12가 현상 패널을 엽니다.

CTRL + SHIFT + C 마우스를 움직이면 요소가 강조 표시되고 클릭해서 요소 탭에 표시할 수 있는 Hover-to-Inspect 도구가 열립니다.

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

오른쪽 클릭> 검사 임의의 요소를 우클릭하고 [Inspect]를 클릭하여 [Developer]패널의 [Elements]

ESC 요소 등을 우클릭하여 검사한 후 "Elements" 탭으로 이동하여 DOM을 보는 경우 ESC를 눌러 콘솔을 위아래로 전환할 수 있습니다. 이 두 가지 방법을 모두 사용하는 것이 좋습니다.

보시는 툴은 다음과 같습니다.

를 누릅니다.F12

개발자 도구

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

언급URL : https://stackoverflow.com/questions/66420/how-do-you-launch-the-javascript-debugger-in-google-chrome

반응형