Chrome 디버거에서 편집

Chrome 디버거에서 편집

Chrome 디버거에서 JavaScript 코드를 "동적으로" 편집하려면 어떻게 해야 합니까?저한테는 맞지 않아서 소스 파일에 접근할 수 없어요.코드를 편집하여 페이지에 어떤 영향을 미치는지 확인하고 싶습니다. 이 경우 애니메이션이 여러 번 큐잉되지 않도록 합니다.

오늘 다른 사람의 웹사이트를 만지작거리다가 우연히 발견했어요.

동적으로 편집하기 전에 디버거의 중단점을 코드 행에 첨부할 수 있다는 것을 깨달았습니다.또한 페이지를 새로고침해도 중단점이 남아 있기 때문에 원하는 변경을 편집하고 중단점에서 일시정지한 상태에서 페이지를 계속 로드할 수 있었습니다.

간단한 대처법으로서 고객의 상황에 맞는 경우는, 다음과 같이 합니다.

1. 스크립트의 이전 지점에 중단점을 추가합니다.
2. 새로고침 페이지
3. 코드에 대한 변경 편집
4. CTRL +(변경 내용 저장)
5. 디버거 일시 중지 해제

Chrome Developer Tools의 "스크립트" 탭(이후 버전에서는 "소스" 탭)에서 기본 제공 JavaScript 디버거를 사용할 수 있지만, 코드에 적용한 변경 사항은 실행 시에만 표시됩니다.즉, 페이지 로드 후 실행되지 않는 코드에 대한 변경은 적용되지 않습니다.예를 들어 마우스 오버 핸들러에 있는 코드에 대한 변경과 달리 즉시 테스트할 수 있습니다.

Chrome Developer Tools의 다른 기능을 소개하는 Google I/O 2010 행사 동영상이 있습니다.

Chrome에서 "Overrides"를 사용하여 원래 소스를 호스팅하지 않는 경우에도 페이지 로드 간에 Javascript 변경을 유지할 수 있습니다.

1. [ Developer Tools ]> [ Sources ]> [ Overrides ]에서 폴더를 만듭니다.
2. Chrome에서 폴더에 대한 사용 권한을 요청하면 [허용]을 클릭합니다.
3. [소스(Sources)]> [페이지(Page)]에서 파일을 편집하여 저장(ctrl-s)합니다.보라색 점은 파일이 로컬로 저장되었음을 나타냅니다.

이하를 참조해 주세요.

1.- [Source]탭으로 이동하여 javascript 파일을 엽니다.

2.- 파일을 편집하고 마우스 오른쪽 버튼을 클릭하면 [Save](저장)을 클릭하여 로컬로 저장합니다.

차이를 표시하거나 변경을 되돌리려면 오른쪽 버튼을 클릭하여 [Local Modifications...]옵션을 선택합니다.메뉴를 표시합니다.표시된 타임스탬프를 확장하면 원본 파일에 대한 변경 내용이 다르게 표시됩니다.

상세한 것에 대하여는, http://www.sitepoint.com/edit-source-files-in-chrome/ 를 참조해 주세요.

매우 간단합니다. '스크립트' 탭으로 이동합니다.원하는 소스 파일을 선택하고 원하는 행을 두 번 클릭하여 편집합니다.

크롬 오버라이드

1. 소스 패널에서 JS 파일을 엽니다.

Right Click 스크립트 src URL >

2. "로컬 재정의 사용"이 선택되어 있는지 확인합니다.

3. Right Click JS 파일의 임의의 장소>

준비 완료!

파일을 편집하고 CMD/CTRL + S로 저장하기만 하면 됩니다.이제 페이지를 새로 고칠 때마다 변경된 파일이 사용됩니다.(파일명이 그대로 유지되면)

파일 아이콘에 보라색 점이 있으면 작동 중임을 알 수 있습니다.

1. 중단점 배치
2. 중단점을 마우스 오른쪽 버튼으로 클릭하고 '중단점 편집'을 선택하십시오.
3. 코드를 삽입합니다.SHIFT+ENTER를 사용하여 새 라인을 만듭니다.

버튼 클릭으로 실행되는 javascript가 있는 경우 [Sources]에서 변경합니다.소스(크롬의 개발자 도구)에서 Ctrl + S를 눌러 저장하면 됩니다.나는 항상 이런 식이야.

페이지를 갱신하면 Javascript 변경은 없어지지만 Chrome은 중단점을 계속 기억합니다.

이것은 JS의 라이브 에디팅을 다루는 꽤 인기 있는 질문이기 때문에, 또 하나의 유용한 옵션을 지적하고 싶습니다.svjacob의 답변에 따르면:

동적으로 편집하기 전에 디버거의 중단점을 코드 행에 첨부할 수 있다는 것을 깨달았습니다.또한 페이지를 새로고침해도 중단점이 남아 있기 때문에 원하는 변경을 편집하고 중단점에서 일시정지한 상태에서 페이지를 계속 로드할 수 있었습니다.

위의 솔루션은 꽤 큰 JS(웹팩 번들 - 3.21MB 미니버전, 130,000줄의 코드 예쁜 버전)에서는 작동하지 않았습니다.크롬이 크래시되어 저장된 변경을 되돌리는 페이지 새로고침이 요구되었습니다.이 경우 Fiddler에서 원격 리소스를 컴퓨터의 로컬 파일로 대체하도록 자동 응답 옵션을 설정할 수 있습니다. 자세한 내용은 이 SO 질문을 참조하십시오.

내 경우 응답을 성공적으로 모의하기 위해 피들러에 CORS 헤더를 추가해야 했습니다.

이제 구글 크롬은 새로운 기능을 도입했다.이 기능을 사용하면 Chrome Browse에서 코드를 편집할 수 있습니다.(코드 위치 영구 변경)

F12 --> Source 탭 -- (오른쪽) --> File System (파일 시스템) 을 누릅니다.그 안에서, 코드의 위치를 선택해 주세요.그 후 크롬 브라우저가 허락을 구하고 그 후 코드가 녹색으로 가라앉습니다.그리고 코드를 수정하면 코드 위치도 반영됩니다(영구적으로 변경됩니다).

감사해요.

@mark의 답변처럼 Chrome DevTools에서 스니펫을 생성하여override기본 JavaScript입니다.마지막으로, 우리는 그들이 페이지에 어떤 영향을 미치는지 볼 수 있습니다.

여기 제가 쓴 크롬의 js 디버거에 대한 부드러운 소개가 있습니다.http://meeech.amihod.com/getting-started-with-javascript-debugging-in-chrome/ 에 관한 정보를 찾는 다른 사용자에게 도움이 될 수 있습니다.

Chrome 디버거의 소스 탭에서 javascrpit 파일을 동적으로 편집할 수 있지만 페이지를 새로 고치고 변경하기 전에 페이지 로드를 일시 중지하려면 중단점을 설정한 후 페이지를 새로고침하고 변경 내용을 편집하고 마지막으로 변경 내용을 확인하기 위해 디버거의 일시 중지를 해제해야 합니다.

스크립트를 변경하여 새로운 스크립트를 디버깅할 방법을 찾고 있었습니다.내가 그렇게 할 수 있었던 방법은:

1. 변경할 스크립트의 첫 번째 줄에 브레이크 포인트를 설정하고 디버깅합니다.

2. 중단점을 맞도록 페이지를 다시 로드합니다.

3. 새 스크립트를 붙여넣고 원하는 중단점을 설정합니다.

4. Ctrl+s를 누르면 페이지가 새로 고쳐지고 첫 번째 줄의 중단점이 히트합니다.

5. F8을 계속 진행하면 리다이렉트 및 새로고침이 이루어지지 않는 한 새로 붙여넣은 스크립트가 원래 스크립트로 대체됩니다.

Chrome DevTools에는 편집기에서처럼 JavaScript 코드를 만들고 편집하여 실행할 수 있는 스니펫 패널이 있습니다.DevTools를 열고 소스 패널을 선택한 다음 스니펫 탭을 선택합니다.

https://developers.google.com/web/tools/chrome-devtools/snippets

언급URL : https://stackoverflow.com/questions/5067532/editing-in-the-chrome-debugger