[javascript] Chrome 개발자 도구-자바 스크립트 수정 및 새로 고침

페이지의 JavaScript를 수정 한 다음 수정 된 JavaScript 파일을 다시로드하지 않고 페이지를 다시로드 할 수 있습니까 (따라서 수정 사항을 잃을 수 있습니까)?



답변

이것은 약간의 해결 방법이지만, 이것을 달성 할 수있는 한 가지 방법은 javascript 파일의 시작 부분이나 조작하려는 블록에 중단 점을 추가하는 것입니다.

그런 다음 다시로드하면 디버거가 해당 중단 점에서 일시 중지되며 소스를 변경하고 파일을 저장 한 다음 수정 된 코드를 통해 디버거를 실행할 수 있습니다.

그러나 모두가 말했듯이 다음에 다시로드하면 변경 사항이 사라집니다. 적어도 약간 수정 된 JS 클라이언트 측을 실행할 수 있습니다.


답변

좋은 소식은 2018 년 3 월에 수정 프로그램이 출시 될 예정입니다. https://developers.google.com/web/updates/2018/01/devtools

“로컬 재정의를 사용하면 DevTools를 변경하고 페이지로드시 변경 사항을 유지할 수 있습니다. 이전에는 페이지를 다시로드하면 DevTools에서 변경 한 내용이 손실됩니다. 로컬 재정의는 대부분의 파일 형식에 적용됩니다.

작동 방식 :

  • DevTools가 변경 사항을 저장해야하는 디렉토리를 지정하십시오. DevTools에서 변경하면 DevTools는 수정 된 파일의 사본을 디렉토리에 저장합니다.
  • 페이지를 다시로드하면 DevTools는 네트워크 리소스 대신 수정 된 로컬 파일을 제공합니다.

로컬 재정의를 설정하려면

  1. 소스 패널을여십시오.
  2. 재정의 탭을 엽니 다.
  3. 설정 재 지정을 클릭하십시오.
  4. 변경 사항을 저장할 디렉토리를 선택하십시오.
  5. 뷰포트 상단에서 허용을 클릭하여 DevTools에 디렉토리에 대한 읽기 및 쓰기 액세스 권한을 부여하십시오.
  6. 변경하십시오. “

업데이트 (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

(일부 웹 개발자는이 도구에 대해 이미 알고 있음)

  1. 파일을 로컬에 저장
  2. 필요에 따라 편집
  3. 이익!

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

전체 문서 : http://docs.telerik.com/fiddler/KnowledgeBase/AutoResponder

추신. 오히려 Chrome에서 플래그로 구현하고 싶습니다. 지금은 preserve after reload할 수 없으며 포럼 및 토론 그룹은 회사 네트워크에서 차단되었습니다. 🙂


답변

예, dev-tools에서 “소스”탭을 열고 변경하려는 스크립트로 이동하십시오. 개발자 도구 창에서 직접 조정 한 다음 ctrl + s를 눌러 스크립트를 저장하십시오. 전체 페이지를 새로 고칠 때까지 새 js가 사용됩니다.


답변