Google Chrome에서 인라인 Javascript로 중단점을 설정하는 방법은 무엇입니까?
Google Chrome에서 Developer Tools를 열면 Profiles, Timelines, Audits 등의 모든 기능이 표시되지만 js 파일이나 html, Javascript 코드 양쪽에서 중단점을 설정할 수 있는 기본적인 기능은 없습니다.javascript 콘솔을 사용하려고 했습니다.예를 들어 JS 오류가 발생하면 페이지 전체를 새로 고치지 않으면 콘솔에서 벗어날 수 없습니다.누가 좀 도와줄래?
<script>HTML 그그그 성그 이그그 ?? ???
<a href="#" onclick="alert('this is inline JS');return false;">Click</a>
<a href="#" onclick="debugger; alert('this is inline JS');return false;">Click</a>
N.B. Chrome이 일시 중지되지 않음debugger 있지 않은 : " " " " " " " " " " " " " "
JS 및 JS의 도 있습니다.<script> 삭제:
- 소스 탭을 클릭합니다.
- [ Show Navigator ]아이콘을 클릭하여 파일을 선택합니다.
- 왼쪽 여백의 행 번호를 더블 클릭합니다.대응하는 행이 브레이크 포인트 패널(4)에 추가됩니다.
소스 탭을 사용하면 JavaScript에서 중단점을 설정할 수 있습니다.아래 디렉터리 트리(위 화살표 및 아래 화살표 포함)에서 디버깅할 파일을 선택할 수 있습니다.같은 탭의 오른쪽에 있는 resume를 누르면 오류를 방지할 수 있습니다.
스크립트의 이름을 지정할 수도 있습니다.
<script> ... (your code here) //# sourceURL=somename.js </script>
물론 "somename"을 어떤 이름으로 대체하면 "Sources" > top> (no domain) > somename.js"의 크롬 디버거에 일반 스크립트로 표시되며 다른 스크립트와 마찬가지로 디버깅할 수 있습니다.
개발자 도구가 스크립트 탭에 열려 있는 동안 스크립트가 포함된 페이지를 새로 고칩니다.스크립트가 포함된 페이지의 html을 표시하는 (프로그램) 엔트리가 파일목록에 추가됩니다.여기서 중단점을 추가할 수 있습니다.
특히 ajax에 의해 반환된html 내의 스크립트를 디버깅하는 직관적인 간단한 또 다른 방법은 스크립트 안에 console.log("test")를 임시로 넣는 것입니다.
이벤트를 실행한 후 개발자 도구 내부의 콘솔 탭을 엽니다."test" debug print 문 오른쪽에 소스 파일 링크가 표시됩니다.소스(VM4xxx 등)를 클릭하면 중단점을 설정할 수 있습니다.
추신: 게다가 크롬을 사용하고 있다면 @Matt Ball에서 제안하는 것과 같은 "debugger" 스테이트먼트를 넣는 것을 고려할 수 있습니다.
나의 상황과 그것을 해결하기 위해 내가 한 일:
HTML 자바스크립트
이름: test 파일: test.html
<!DOCTYPE html>
<html>
<head>
<script src="scripts/common.js"></script>
<title>Test debugging JS in Chrome</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div>
<script type="text/javascript">
document.write("something");
</script>
</div>
</body>
</html>
Chrome에서 Javascript Debugger로 들어가 Scripts 탭을 클릭하여 위와 같이 목록을 드롭다운합니다.scripts/common.js는 명확하게 표시되지만 드롭다운에 현재 html 페이지 test.html이 표시되지 않아 내장된 javascript를 디버깅할 수 없었습니다.
<script type="text/javascript">
document.write("something");
</script>
당황스러웠어요.그러나 삽입 스크립트에서 오래된 type="text/excript"를 삭제했을 때:
<script>
document.write("something");
</script>
, 에 표시되었고, ...새로고침/새로고침,voila,드롭다운목록에표시되어모든것이다시정상화되었습니다.
HTML 페이지에 내장된 Javascript를 디버깅하는 데 문제가 있는 사람에게 도움이 되었으면 합니다.
같은 도 같은 문제를 안고 있었습니다.저도 자바스크립트를 디버깅하는 을 알고 있습니다.자바스크립트<script>태그입니다. 그런데 (색인)이라는 소스 탭 아래에 괄호가 있는 것을 발견했습니다.중단점을 설정하려면 회선 번호를 클릭합니다.
이것은 크롬 71입니다.
" " " debugger;제 대본에 있는 맨 위에 있는 게 효과가 있었어요.
는 Q에 관한 것이 것을 .Firefox하지만 이 질문의 복사본을 추가하고 싶지는 않았습니다.
Firefox를 .debugger;@http-ball이 제안한 대로 할 수 있다script
코드에 래래드,,를 debugger디버깅하는 행 위에 브레이크 포인트를 추가할 수 있습니다.브라우저에 브레이크 포인트만 설정하면 정지하지 않습니다.
Chrome에 관한 질문이기 때문에 Firefox 답변을 추가할 수 없는 경우.Don't : (답변에서 제외)어디에 투고해야 하는지 알려주면 기꺼이 투고를 옮길 수 있습니다.:)
[스크립트] 탭이 표시되지 않는 경우는, 올바른 인수로 Chrome 를 기동하고 있는 것을 확인해 주세요.Chrome 인수를 디버깅을 때 이 .--remote-shell-port=9222크롬
이 문제에 부딪혔는데, 내 인라인 함수는 각도에 관한 것이었다.JS 뷰따라서 디버거의 소스 탭에서는 index.html만 사용 가능하기 때문에 디버깅을 추가하기 위해 인라인 스크립트에 액세스할 수 없었습니다.
즉, 인라인으로 특정 뷰를 열었을 때(선택할 수 없는 경우) 액세스할 수 없었습니다.
내가 그것을 칠 수 있었던 방법은 인라인 JS 함수 안에 잘못된 함수를 넣거나 호출하는 것이었습니다.
솔루션에는 다음이 포함됩니다.
function doMyInline(data) {
//Throw my undefined error here.
$("select.Sel").debug();
//This is the real onclick i was passing to
angular.element(document.getElementById(data.id)).scope().doblablabla(data.id);
}
즉, 버튼을 클릭했을 때 크롬 콘솔로 프롬프트가 표시됩니다.
Uncaught TypeError: undefined is not a function
여기서 중요한 것은 이것의 원천이었습니다.VM5658:6이 버튼을 클릭하면 인라인을 통해 브레이크 포인트를 나중에 사용할 수 있습니다.
아주 복잡한 방법으로 접근했군요그러나 이 기능은 작동했고 보기를 동적으로 로드하는 단일 페이지 앱을 다룰 때 유용할 수 있습니다.
그VM[n]중요한 가치는 없습니다.n스크립트 ID와 동일합니다.이 정보는 Chrome [VM]에서 확인할 수 있습니다.
Visual Studio (2012)도 같은 문제가 발생하여 IIS Express로 전환하면 문제가 해결되었습니다!
그script태그의type속성은 고려되지 않았습니다.
Visual Studio Development Server는 Chrome이 중단점을 활성화하는 데 필요한 모든 기능을 제공하지 않습니다.
이것은 위의 Rian Schmits의 답변의 연장선이다.제 경우 HTML 코드가 자바스크립트 코드에 포함되어 있어서 HTML 코드 이외에는 아무것도 보이지 않았습니다.Chrome 디버깅은 몇 년 동안 변경되었지만 소스/소스 탭을 마우스 오른쪽 버튼으로 클릭하면 작업 공간에 폴더 추가가 표시됩니다.프로젝트 전체를 추가할 수 있게 되어 모든 JavaScript에 액세스할 수 있게 되었습니다.자세한 내용은 이 링크를 참조하십시오.이게 도움이 됐으면 좋겠어요.
를 추가해야 합니다.type="text/javascript"스크립트로 선택될 수 있도록 스크립트 블록으로 이동합니다.예를 들어 다음과 같습니다.<script type="text/javascript"> ...your code here... </script>
언급URL : https://stackoverflow.com/questions/5156388/how-to-set-breakpoints-in-inline-javascript-in-google-chrome
'source' 카테고리의 다른 글
| React 함수/Hooks 컴포넌트에 componentDismount가 동등합니까? (0) | 2022.10.30 |
|---|---|
| Vue 3 - app.config가 정의되지 않았습니다.이 오류를 회피하는 방법 (0) | 2022.10.30 |
| Vuetify.js에서 추가 아이콘을 클릭하여 함수를 호출하는 방법 (0) | 2022.10.30 |
| 어레이 인덱스가 바인딩되지 않은 동작 (0) | 2022.10.30 |
| 간단한 JSON 라이브러리를 사용하여 json 파일을 Java로 읽는 방법 (0) | 2022.10.30 |