Chrome JavaScript 디버깅-페이지 새로 고침 또는 코드를 통한 중단 사이에 중단 점을 저장하는 방법은 무엇입니까?
Chrome과 JavaScript 디버거를 사용할 때 페이지 / 스크립트를 다시로드 할 때마다 중단 점이 손실되고 팝업에서 스크립트 파일을 찾아 중단 점에 대한 코드 줄을 찾아 클릭하여 추가해야합니다. 등
이러한 중단 점을 저장하여 페이지를 새로 고친 후에도 중단되도록하는 방법이 있습니까 (다른 디버거에서이 작업을 수행했습니다)?
또는 내 JavaScript 코드에서 크롬에 추적을 시작하도록 (한 줄에서 일시 중지하도록) 지시 할 수있는 깨끗한 방법이 있습니까?
당신은 넣을 수 있습니다
debugger;
대부분의 JavaScript 환경에서 중단됩니다. 그들은 확실히 지속될 것입니다. 디버거를 제거하고 프로덕션 환경에 대한 console.log 호출을 제거하는 minifier를 사용하는 것이 좋습니다.
최신 버전의 Chrome 브라우저에는 콘솔 패널 상단의 필터 옆에 "로그 보존"옵션이 있습니다. 이전 버전에서는 빈 콘솔 창을 마우스 오른쪽 버튼으로 클릭하면 해당 옵션 ( "탐색시 로그 유지")이 표시됩니다. console.log 문이나 하드 코딩 된 디버거 호출이 없을 때 편리합니다.
업데이트 : github에서 파일을 가져와 모든 console.log 호출을 제거하는 chimney 라는 도구를 찾았습니다 . 디버거 호출을 제거하는 방법에 대한 좋은 아이디어를 제공합니다.
중단 점을 설정하고 네트워크 탭으로 전환 한 다음 탐색시 로그 보존 토글 버튼을 선택 합니다. 이제 새로 고칠 때 중단 점이 있어야합니다.
또는 JavaScript 방식은
debugger;
또한 현재 Epoch 시간이있는 URL에 쿼리 매개 변수를 첨부 하여 서버에서 클라이언트로 JavaScript 파일을 전송 합니까? 이는 JavaScript 파일의 캐싱을 방지하는 데 사용됩니다.
이 경우 Chrome 개발자 도구는 새로 고침 후 파일을 다른 파일로 해석하여 중단 점을 (올바르게) 제거합니다.
나를 위해 쿼리 매개 변수를 제거하면 CDT가 새로 고침 후에도 중단 점을 유지했습니다.
다른 스크립트에서 동적으로로드하거나 평가하는 스크립트에서 이런 일이 발생할 수 있습니까? 이 시나리오는 sourceURL 속성을 발견 할 때까지 정말 짜증 났다고 말할 수 있습니다. 디버그하려는 스크립트의 마지막 줄에 다음과 같은 특수 형식의 주석을 배치하면 해당 주석을 Chrome 내에서 '고정'하여 참조 프레임을 갖게됩니다.
// # sourceURL = filename.js
이제 수동으로 배치 된 중단 점이 페이지로드 사이에 유지됩니다! 규칙은 실제로 소스 맵 사양에서 비롯되었지만 Chrome은 적어도이를 독립형 기술로 간주합니다. 여기에 참조가 있습니다.
ExtJs 6.x를 사용하는 사람들의 경우 :
Ext.Loader의 disableCaching 대신 페이지 URL에 "cache" 또는 "disableCacheBuster" 쿼리 매개 변수를 추가 할 수 있습니다 . 그러면 파일에서 "_dc"매개 변수가 제거되고 크롬 디버거가 중단 점을 유지할 수 있습니다.
애플리케이션에서 bootstrap.js를 참조하십시오 (구성 매개 변수 disableCaching).
debugger;소스 의 문을 사용하여 디버거를 중단시킬 수 있습니다.
Chrome 개발자 도구는 예상대로 작동해야하지만 debugger;(개발 중!) 코드 에 명령문을 넣어 실행을 일시 중지 할 수 있습니다.
디버거를 넣을 수 있습니다. 디버깅을 시작하려는 코드 앞에. 페이지가로드되기 시작하면 디버거에서 중지됩니다. 성명서. 그런 다음 요구 사항에 따라 디버깅 지점을 쉽게 적용 할 수 있습니다.
'IT TIP' 카테고리의 다른 글
| C # 언어 이름의 유래 (0) | 2020.10.26 |
|---|---|
| WeakHashMap은 있지만 WeakSet은없는 이유는 무엇입니까? (0) | 2020.10.26 |
| 매개 변수 변경시 Angular Directive 새로 고침 (0) | 2020.10.26 |
| Spring Boot 및 MongoDB에 대한 연결 세부 정보를 구성하는 방법은 무엇입니까? (0) | 2020.10.26 |
| C # 컴파일러에서 빈 열거 형을 허용하는 이유는 무엇입니까? (0) | 2020.10.26 |