Chrome에서 개발자 도구를 열면 프로필, 타임 라인 및 감사와 같은 모든 종류의 기능이 표시되지만 js 파일과 html 및 자바 스크립트 코드 모두에서 중단 점을 설정할 수있는 것과 같은 기본 기능이 없습니다! 자바 스크립트 콘솔을 사용하려고했습니다. 예를 들어 JS 오류가 발생하면 전체 페이지를 새로 고치지 않으면 벗어날 수 없습니다. 누군가 도울 수 있습니까?
답변:
소스 탭을 사용하면 JavaScript에서 중단 점을 설정할 수 있습니다. 그 아래의 디렉토리 트리 (위쪽 및 아래쪽 화살표가 있음)에서 디버깅하려는 파일을 선택할 수 있습니다. 같은 탭의 오른쪽에있는 다시 시작을 누르면 오류가 발생할 수 있습니다.
<script> your code </script>같은 이름을 추가하십시오 : <script> your code //# sourceURL=somename.js </script> 이것은 아래 답변에서 더 잘 설명됩니다
<script>태그 또는 HTML 태그 속성 내의 코드에 대해 이야기하고 있습니까?
<a href="#" onclick="alert('this is inline JS');return false;">Click</a>어느 쪽이든, 다음debugger 과 같은 키워드 가 작동합니다.
<a href="#" onclick="debugger; alert('this is inline JS');return false;">Click</a>debugger개발 도구가 열려 있지 않으면 NB Chrome이 s 에서 일시 중지 되지 않습니다.
JS 파일 및 <script>태그 에서 속성 중단 점을 설정할 수도 있습니다 .
Sources대신 탭이 호출 됩니다 Scripts.
스크립트 이름을 지정할 수도 있습니다.
<script>
... (your code here)
//# sourceURL=somename.js
</script>
ofcourse는 "somename"을 어떤 이름으로 대체하고;) 그러면 "Sources> top> (no domain)> somename.js"의 크롬 디버거에서 일반 스크립트로 볼 수 있으며 다른 스크립트처럼 디버깅 할 수 있습니다.
스크립트가 포함 된 페이지를 새로 고치면 개발자 도구가 스크립트 탭에서 열립니다. 그러면 스크립트를 포함한 페이지의 html을 보여주는 (프로그램) 항목이 파일 목록에 추가됩니다. 여기에서 중단 점을 추가 할 수 있습니다.
내 상황과 해결 방법 :
HTML 페이지에 다음과 같이 javascript 파일이 포함되어 있습니다.
페이지 이름 : 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 디버거를 시작하고 스크립트 탭을 클릭하고 위와 같이 목록을 드롭 다운하십시오. 나는 명확하게 볼 수 있습니다 common.js를 / 스크립트를 하지만 내가 할 수 없습니다 현재 HTML 페이지 참조 test.html를 따라서 내가 포함 된 자바 스크립트를 디버깅 할 수 드롭 다운에서를 :
<script type="text/javascript">
document.write("something");
</script>그것은 당황했다. 그러나 임베디드 스크립트에서 더 이상 사용되지 않는 type = "text / javascript" 를 제거했을 때 :
<script>
document.write("something");
</script>.. 그리고 페이지를 새로 고치거나 새로 고쳤습니다.
나는 이것이 HTML 페이지에서 임베디드 자바 스크립트를 디버깅하는 데 문제가있는 사람에게 도움이되기를 바랍니다.
type필수 속성입니다. HTML5에서는 선택 사항입니다.
<div>되어 디버거에서 코드를 볼 수 없었습니다.
'스크립트'탭이 보이지 않으면 올바른 인수로 Chrome을 시작해야합니다. 인수로 서버 측 JavaScript를 디버깅하기 위해 Chrome을 시작할 때이 문제가 발생했습니다 --remote-shell-port=9222. 인수없이 Chrome을 시작해도 문제가 없습니다.
이 문제를 겪었지만 인라인 함수는 angularJS보기를 사용하지 않았습니다. 따라서 디버거의 소스 탭에서 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]"
Q가 Firefox중요하지 않다는 것을 알고 있지만이 질문의 사본을 추가하여 직접 대답하고 싶지 않았습니다.
Firefox의 경우 @ matt-ball 이 태그에 제안한 것을 debugger;수행 할 수 있도록 추가해야합니다 .script
따라서 코드에서 debugger디버깅하려는 행 위에 추가 한 다음 중단 점을 추가 할 수 있습니다. 브라우저에서 중단 점을 설정하면 중지되지 않습니다.
이것이 Chrome에 관한 질문이라면 Firefox 답변을 추가 할 수있는 장소가 아닌 경우. 하지 말아야 할 것 :( 답을 빼면 어디에 게시해야하는지 알려 주면 행복하게 게시물을 이동할 수 있습니다. :)
이것은 위 의 Rian Schmits의 답변을 확장 한 것입니다. 필자의 경우 JavaScript 코드에 HTML 코드가 포함되어 있으며 HTML 코드 이외의 다른 것을 볼 수 없었습니다. 어쩌면 Chrome 디버깅이 수년에 걸쳐 변경되었지만 소스 / 소스 탭을 마우스 오른쪽 버튼으로 클릭하면 작업 영역에 폴더 추가가 표시됩니다 . 전체 프로젝트를 추가 할 수 있었으므로 모든 JavaScript에 액세스 할 수있었습니다. 이 링크에서 자세한 내용 을 확인할 수 있습니다 . 나는 이것이 누군가를 돕기를 바랍니다.