Chrome 개발자 도구-자바 스크립트 수정 및 새로 고침
답변:
이것은 약간의 해결 방법이지만, 이것을 달성 할 수있는 한 가지 방법은 javascript 파일의 시작 부분이나 조작하려는 블록에 중단 점을 추가하는 것입니다.
그런 다음 다시로드하면 디버거가 해당 중단 점에서 일시 중지되며 소스를 변경하고 파일을 저장 한 다음 수정 된 코드를 통해 디버거를 실행할 수 있습니다.
그러나 모두가 말했듯이 다음에 다시로드하면 변경 사항이 사라집니다. 적어도 약간 수정 된 JS 클라이언트 측을 실행할 수 있습니다.
var foo = 'bar'를 들어 스크립트를 추가 해도 foo콘솔에 노출되지 않습니다 .
좋은 소식은 2018 년 3 월에 수정 프로그램이 출시 될 예정입니다. https://developers.google.com/web/updates/2018/01/devtools
"로컬 재정의를 사용하면 DevTools를 변경하고 페이지로드시 변경 사항을 유지할 수 있습니다. 이전에는 페이지를 다시로드하면 DevTools에서 변경 한 내용이 손실됩니다. 로컬 재정의는 대부분의 파일 형식에 적용됩니다.
작동 방식 :
- DevTools가 변경 사항을 저장해야하는 디렉토리를 지정하십시오. DevTools에서 변경하면 DevTools는 수정 된 파일의 사본을 디렉토리에 저장합니다.
- 페이지를 다시로드하면 DevTools는 네트워크 리소스 대신 수정 된 로컬 파일을 제공합니다.
로컬 재정의를 설정하려면
- 소스 패널을여십시오.
- 재정의 탭을 엽니 다.
- 설정 재 지정을 클릭하십시오.
- 변경 사항을 저장할 디렉토리를 선택하십시오.
- 뷰포트 상단에서 허용을 클릭하여 DevTools에 디렉토리에 대한 읽기 및 쓰기 액세스 권한을 부여하십시오.
- 변경하십시오. "
업데이트 (2018 년 3 월 19 일) : https://developers.google.com/web/updates/2018/01/devtools#overrides에 대한 자세한 설명은 다음과 같습니다.
자원 재정의 확장은 정확히 수행 할 수 있습니다 :
- 바꾸려는 URL에 대한 파일 규칙을 만듭니다.
- 확장 프로그램에서 js / css / etc를 편집하십시오.
- 당신이 원하는대로 자주 다시로드 :)
정확한 질문에 대한 답이 아니라는 것을 알고 있지만 (Chrome Developer Tools)이 해결 방법을 성공적으로 사용하고 있습니다 : http://www.telerik.com/fiddler
(일부 웹 개발자는이 도구에 대해 이미 알고 있음)
- 파일을 로컬에 저장
- 필요에 따라 편집
- 이익!
전체 문서 : http://docs.telerik.com/fiddler/KnowledgeBase/AutoResponder
추신. 오히려 Chrome에서 플래그로 구현하고 싶습니다. 지금은 preserve after reload할 수 없으며 포럼 및 토론 그룹은 회사 네트워크에서 차단되었습니다. :)
예, dev-tools에서 "소스"탭을 열고 변경하려는 스크립트로 이동하십시오. 개발자 도구 창에서 직접 조정 한 다음 ctrl + s를 눌러 스크립트를 저장하십시오. 전체 페이지를 새로 고칠 때까지 새 js가 사용됩니다.