Google Chrome에서 JavaScript 디버거를 시작하려면 어떻게 해야 합니까?
Google Chrome을 사용할 때 JavaScript 코드를 디버깅하고 싶습니다.내가 어떻게 그럴 수 있을까?
소스에 추가해 보세요.
debugger;
모든 브라우저가 아닌 대부분의 브라우저에서 작동합니다.코드의 어딘가에 배치하면 중단점처럼 동작합니다.
Windows:SHIFTJ --또는 F12
Mac: ⌥-⌘-J
렌치 메뉴([Tools]> [ JavaScript Console ])에서도 사용할 수 있습니다.
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
'source' 카테고리의 다른 글
Javascript에서 선택할 옵션 추가 (0) | 2022.10.13 |
---|---|
UNIQURE 제약조건은 필드에 INDEX를 자동으로 생성합니까? (0) | 2022.10.13 |
PHP를 사용하여 두 날짜의 차이를 계산하는 방법은 무엇입니까? (0) | 2022.10.13 |
PHP에서 시간 차이를 분 단위로 가져오는 방법 (0) | 2022.10.13 |
MySQL은 하나의 열과 대응하는 다른 열을 선택합니다. (0) | 2022.10.13 |