Chrome 디버거에서 JavaScript 코드를 “동적으로”편집하려면 어떻게합니까? 그것은 나를위한 것이 아니므로 소스 파일에 액세스 할 수 없습니다. 코드를 편집하고 페이지에 어떤 효과가 있는지 확인하고 싶습니다.이 경우 애니메이션이 여러 번 큐에 들어 가지 못하게합니다.
답변
Chrome 개발자 도구의 ‘스크립트’탭 (기본 버전에서는 ‘소스’탭) 아래에 내장 된 자바 스크립트 디버거를 사용할 수 있지만 코드에 적용한 변경 사항은 코드가 실행될 때만 표시됩니다. 즉, 페이지를로드 한 후 실행되지 않는 코드를 변경해도 아무런 영향이 없습니다. 예를 들어 마우스 오버 핸들러에 상주 하는 코드 변경과 달리 즉시 테스트 할 수 있습니다.
Chrome 개발자 도구의 다른 기능을 소개하는 Google I / O 2010 이벤트의 비디오가 있습니다 .
답변
나는 다른 사람의 웹 사이트를 가지고 놀았을 때 오늘 이것을 보았습니다.
동적으로 편집 하기 전에 디버거의 중단 점을 일부 코드 줄에 첨부 할 수 있다는 것을 깨달았습니다 . 그리고 페이지를 다시로드 한 후에도 중단 점이 유지 되므로 중단 점 에서 일시 중지 된 상태에서 원하는 변경 사항을 편집 한 다음 페이지를 계속로드 할 수있었습니다.
따라서 빠른 해결 방법으로, 상황에 맞는 경우 :
- 스크립트의 초기 지점에 중단 점 추가
- 페이지 새로 고침
- 코드 변경 사항 편집
- CTRL+ s(변경 사항 저장)
- 디버거 일시 중지
답변
이것은 당신이 찾고있는 것입니다 :
1.- 소스 탭으로 이동하여 자바 스크립트 파일을 엽니 다.
2.- 파일을 편집하고 마우스 오른쪽 단추로 클릭하면 메뉴가 나타납니다. 저장을 클릭 하고 로컬로 저장하십시오.
차이를 보거나 변경 사항을 되돌리려면 마우스 오른쪽 버튼을 클릭하고 메뉴에서 로컬 수정 … 옵션을 선택하십시오 . 표시된 타임 스탬프를 확장하면 원본 파일과 관련하여 변경 내용이 다릅니다.
자세한 내용은 여기 : http://www.sitepoint.com/edit-source-files-in-chrome/
답변
아주 쉽게 ‘스크립트’탭으로 이동하십시오. 원하는 소스 파일을 선택하고 아무 줄이나 두 번 클릭하여 편집하십시오.
답변
이것은 JS의 실시간 편집을 다루는 매우 인기있는 질문이므로 다른 유용한 옵션을 지적하고 싶습니다. svjacob의 답변에서 설명한 바와 같이 :
동적으로 편집하기 전에 디버거의 중단 점을 일부 코드 줄에 첨부 할 수 있다는 것을 깨달았습니다. 그리고 페이지를 다시로드 한 후에도 중단 점이 유지되므로 중단 점에서 일시 중지 된 상태에서 원하는 변경 내용을 편집 한 다음 페이지를 계속로드 할 수있었습니다.
위의 솔루션은 꽤 큰 JS (웹 팩 번들-3.21MB 축소 버전, 사전 버전의 130k 코드 라인)에서 작동하지 않았습니다. 크롬이 충돌하고 저장된 변경 사항을 되돌릴 페이지 다시로드를 요청했습니다. 이 경우에는 Fiddler 를 사용하여 원격 리소스를 컴퓨터의 로컬 파일로 바꾸도록 자동 응답 옵션을 설정할 수 있습니다 . 자세한 내용은이 SO 질문을 참조하십시오 .
필자의 경우 응답을 성공적으로 조롱하기 위해 피들러에 CORS 헤더를 추가해야했습니다.
답변
버튼 클릭으로 실행되는 자바 스크립트가 소스> 소스 (크롬의 개발자 도구에서)에서 변경하고 Ctrl + S를 눌러 저장하면 충분 합니다. 나는 항상 이것을한다.
페이지를 새로 고침하면 자바 스크립트 변경 사항이 사라지지만 크롬은 여전히 중단 점을 기억합니다.
답변
이제 Google 크롬에 새로운 기능이 도입되었습니다. 이 기능을 사용하면 크롬 탐색에서 코드를 편집 할 수 있습니다. (코드 위치에 대한 영구적 인 변경)
이를 위해 F12-> 소스 탭-(오른쪽)-> 파일 시스템-을 눌러 코드 위치를 선택하십시오. 그런 다음 크롬 브라우저가 허가를 요청하고 그 코드가 녹색으로 싱크됩니다. 코드를 수정할 수 있으며 코드 위치에도 반영됩니다 (영구적으로 변경됨)
감사