Google 크롬을 사용하여 HTML 페이지에 포함 된 자바 스크립트 디버깅 및 편집

Google 크롬을 사용하여 HTML 페이지에 포함 된 자바 스크립트 디버깅 및 편집

---

Chrome 개발자 도구를 사용하면 자바 스크립트가 .js 파일에있는 경우 브라우저에서 자바 스크립트를 수정할 수 있습니다. 그러나 HTML 페이지에 포함 된 자바 스크립트를 편집 할 수없는 것 같습니다. 즉 :

<script type="text/javascript> 
// code here that I want to debug/edit
</script> 

특정 페이지에 자바 스크립트가 많이 포함되어 있기 때문에 이것은 저에게 큰 문제입니다.

이 질문과 유사합니다 : 웹 페이지의 JavaScript 블록 편집 ... 라이브 이지만 이것은 크롬이 아니라 파이어 폭스에 관한 것입니다.

Google 크롬 개발자 도구를 사용하여 HTML 페이지에 포함 된 자바 스크립트를 편집하려면 어떻게해야합니까?

---

실제로 크롬에서는이를 수행 할 수 있으며 개발자 도구 창의 소스 탭에서 HTML 파일을 선택합니다 . 자바 스크립트 대신 HTML이 표시되고 <script>태그 에 중단 점을 추가하기 만하면 됩니다. 또한 debugger;디버그하려는 스크립트 에 명령을 추가 할 수 있습니다 . 예를 들면 :

<script>
 // some code
 debugger; // This is your breakpoint
 // other code you will able to debugg
</script>

debugger;웹 사이트를 공개하고 싶을 때 를 제거하는 것을 잊지 마십시오 .

---

인라인 / 임베디드 자바 스크립트가있는 파일을 찾는 데 어려움을 겪었습니다. 같은 문제가있는 다른 사람들에게는 도움이 될 수도 있고 아닐 수도 있습니다.

Windows 용 Chrome 21.0.1180.89m 사용

신중하게 배치 된 버튼을 클릭하면 모든 파일이 표시됩니다. 보다:

이제 디버깅을 시작할 수 있습니다 ...

---

이 답변 중 어느 것도 나를 위해 일하지 않았습니다.

나를 위해 작동하는 것은 페이지에 내 자바 스크립트가 이미로드되어있는 경우 해당 자바 스크립트를 복사하고 편집 한 다음 콘솔에 붙여 넣으면 기능이나 재정의해야하는 모든 것을 재정의 할 수 있다는 것입니다.

예를 들어 페이지에 다음이있는 경우 :

<script>
var foo = function() { console.log("Hi"); }
</script>

스크립트간에 내용을 가져 와서 편집 한 다음 다음과 같이 디버거에 입력 할 수 있습니다.

foo = function() { console.log("DO SOMETHING DIFFERENT"); }

그리고 그것은 나를 위해 일할 것입니다.

또는 당신이 좋아한다면

function foo() {
    doAThing();
}

그냥 들어갈 수 있습니다

function foo() {
    doSomethingElse();
}

그리고 foo는 재정의됩니다.

아마도 최선의 해결 방법은 아니지만 작동합니다.

---

요소 탭으로 이동하여 스크립트를 찾은 다음 필요한 부분을 마우스 오른쪽 버튼으로 클릭하고 "HTML로 편집"을 선택합니다.

HTML로 편집이 나타나지 않는 경우 노드를 두 번 클릭하면 강조 표시되고 편집 할 수 있습니다.

참조 URL : https://stackoverflow.com/questions/7497913/using-google-chrome-to-debug-and-edit-javascript-embedded-in-html-page