[javascript] Chrome에서 인라인 Javascript로 중단 점을 설정하는 방법은 무엇입니까?

Chrome에서 개발자 도구를 열면 프로필, 타임 라인 및 감사와 같은 모든 종류의 기능이 표시되지만 js 파일과 html 및 자바 스크립트 코드 모두에서 중단 점을 설정할 수있는 것과 같은 기본 기능이 없습니다! 자바 스크립트 콘솔을 사용하려고했습니다. 예를 들어 JS 오류가 발생하면 전체 페이지를 새로 고치지 않으면 벗어날 수 없습니다. 누군가 도울 수 있습니까?



답변

소스 탭을 사용하면 JavaScript에서 중단 점을 설정할 수 있습니다. 그 아래의 디렉토리 트리 (위쪽 및 아래쪽 화살표가 있음)에서 디버깅하려는 파일을 선택할 수 있습니다. 같은 탭의 오른쪽에있는 다시 시작을 누르면 오류가 발생할 수 있습니다.


답변

<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>태그 에서 속성 중단 점을 설정할 수도 있습니다 .

  1. 소스 탭을 클릭 하십시오
  2. 네비게이터 표시 아이콘을 클릭하고 파일을 선택하십시오.
  3. 왼쪽 여백에서 줄 번호를 두 번 클릭하십시오. 해당 행이 중단 점 패널 (4)에 추가됩니다 .

여기에 이미지 설명을 입력하십시오


답변

스크립트 이름을 지정할 수도 있습니다.

<script>
... (your code here)
//# sourceURL=somename.js
</script>

ofcourse는 “somename”을 어떤 이름으로 대체하고;) 그러면 “Sources> top> (no domain)> somename.js”의 크롬 디버거에서 일반 스크립트로 볼 수 있으며 다른 스크립트처럼 디버깅 할 수 있습니다.


답변

스크립트가 포함 된 페이지를 새로 고치면 개발자 도구가 스크립트 탭에서 열립니다. 그러면 스크립트를 포함한 페이지의 html을 보여주는 (프로그램) 항목이 파일 목록에 추가됩니다. 여기에서 중단 점을 추가 할 수 있습니다.


답변

특히 아약스가 반환 한 html 내부의 스크립트를 디버깅하는 또 다른 직관적 인 간단한 방법은 스크립트 안에 console.log ( “test”)를 임시로 넣는 것입니다.

이벤트를 시작하면 개발자 도구 내에서 콘솔 탭을여십시오. “test”디버그 인쇄 문의 오른쪽에 소스 파일 링크가 표시됩니다. 소스 (VM4xxx와 같은 것)를 클릭하기 만하면 중단 점을 설정할 수 있습니다.

추신 : 게다가, @Matt Ball이 제안하는 것과 같이 크롬을 사용하는 경우 “디버거”문을 넣는 것을 고려할 수 있습니다


답변

내 상황과 해결 방법 :
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 페이지에서 임베디드 자바 스크립트를 디버깅하는 데 문제가있는 사람에게 도움이되기를 바랍니다.


답변

debugger;내 스크립트에 맨 위에 추가하면 나를 위해 일했습니다.