Chrome 디버거에서 편집

247

Chrome 디버거에서 JavaScript 코드를 "동적으로"편집하려면 어떻게합니까? 그것은 나를위한 것이 아니므로 소스 파일에 액세스 할 수 없습니다. 코드를 편집하고 페이지에 어떤 효과가 있는지 확인하고 싶습니다.이 경우 애니메이션이 여러 번 큐에 들어 가지 못하게합니다.

javascript  google-chrome  debugging 
— 톰
소스
5
Opera를 사용할 수 있습니다. Opera에서는 JS 파일을 편집 할 수 있습니다. 페이지를 다시로드하면 변경 사항이 적용됩니다. > 소스> 변경 사항> 변경 사항 적용을 마우스 오른쪽 단추로 클릭하십시오.
— XP1
이것은 Chrome 디버거를위한 멋진 튜토리얼입니다. 디버거에서 스크립트를 변경하는 매우 간단한 단계를 보여줍니다.
— SaganRitual
1
조건부 중단 점을 통해 코드를 "주입"할 수도 있습니다 . 주어진 예 num = 5, console.log(arguments[0], num), false에서 foo함수 내부의 값을 업데이트하고 기록하는 데 사용 합니다.
— mems
— stackinfostack

답변:

80

Chrome 개발자 도구의 '스크립트'탭 (기본 버전에서는 '소스'탭) 아래에 내장 된 자바 스크립트 디버거를 사용할 수 있지만 코드에 적용한 변경 사항은 코드가 실행될 때만 표시됩니다. 즉, 페이지를로드 한 후 실행되지 않는 코드를 변경해도 아무런 영향이 없습니다. 예를 들어 마우스 오버 핸들러에 상주 하는 코드 변경과 달리 즉시 테스트 할 수 있습니다.

Chrome 개발자 도구의 다른 기능을 소개하는 Google I / O 2010 이벤트의 비디오가 있습니다 .

— 아담
소스
26
이후 버전의 Chrome에서는 탭 아이콘이 사라지고 '스크립트'탭의 이름이 '소스'로 바뀌 었으므로 자바 스크립트 디버거를 찾는 것이 분명하지 않을 수 있습니다. 좀 더 자세한 정보는 여기 stackoverflow.com/questions/12113769/…
— chrisjleu
9
그러한 방법은 없습니다. 소스 탭에서 코드를 수정할 수도 없습니다.
— Melab
17
Chrome 디버거는 자바 스크립트의 로컬 수정을 허용하지 않습니다. 그릇된.
— omikes
1
@oMiKeY 거짓이란 무엇입니까? 크롬은 확실히 디버거에서 스크립트 수정을 허용합니다.
— JLRishe
6
@oMiKeY 당신은 스크립트가 prettified되지 않은 경우 수정할 수 있습니다
— peterchaula
284

나는 다른 사람의 웹 사이트를 가지고 놀았을 때 오늘 이것을 보았습니다.

동적으로 편집 하기 전에 디버거의 중단 점을 일부 코드 줄에 첨부 할 수 있다는 것을 깨달았습니다 . 그리고 페이지를 다시로드 한 후에도 중단 점이 유지 되므로 중단 점 에서 일시 중지 된 상태에서 원하는 변경 사항을 편집 한 다음 페이지를 계속로드 할 수있었습니다.

따라서 빠른 해결 방법으로, 상황에 맞는 경우 :

  1. 스크립트의 초기 지점에 중단 점 추가
  2. 페이지 새로 고침
  3. 코드 변경 사항 편집
  4. CTRL+ s(변경 사항 저장)
  5. 디버거 일시 중지
— 야곱
소스
1
감사! 페이지로드 근처에서 바로 호출되는 자체 실행 익명 함수를 변경해야 할 때 이것이 효과적이라는 것을 알았습니다.
— Peter
1
Argh, 내가 이것을 이전에 시도했지만 작동하지 않았지만 오 남자이지만 어떻게 그것을 놓쳤습니까? 그러나 그래, 나를 위해 작동하지 않습니다.
— Jamie Hutber
8
중요한 것은 변경 사항을 저장해야한다는 것입니다 (4 단계). 감사!
— Sergey Goliney
3
나를 위해 html 파일 내의 자바 스크립트에서 작동하지 않습니다 . 또한 작업 공간에 폴더를 추가 한 경우 로컬 js 파일을 선택하고 마우스 오른쪽 단추를 클릭하여 해당 파일을 네트워크 dito에 맵핑하십시오.
— oo
1
HTML 파일에서 스크립트를 수정하는 방법이 없습니까?
— Warrior
13

이것은 당신이 찾고있는 것입니다 :

1.- 소스 탭으로 이동하여 자바 스크립트 파일을 엽니 다.

2.- 파일을 편집하고 마우스 오른쪽 단추로 클릭하면 메뉴가 나타납니다. 저장을 클릭 하고 로컬로 저장하십시오.

차이를 보거나 변경 사항을 되돌리려면 마우스 오른쪽 버튼을 클릭하고 메뉴에서 로컬 수정 ... 옵션을 선택하십시오 . 표시된 타임 스탬프를 확장하면 원본 파일과 관련하여 변경 내용이 다릅니다.

자세한 내용은 여기 : http://www.sitepoint.com/edit-source-files-in-chrome/

— 아르테미스
소스
5

아주 쉽게 '스크립트'탭으로 이동하십시오. 원하는 소스 파일을 선택하고 아무 줄이나 두 번 클릭하여 편집하십시오.

— 굴
소스
4
// URL을 : 당신이 파일의 경우 디스크에 변경 사항 저장 수 있다면 좋지 않을까
— 짐 Blackler
3
그것은 내가 한 일이지만, 변경 사항은 페이지에 반영되지 않았습니다. $ (selector) .fadeIn () ...을 $ (selector) .stop (true, true) .fadeIn () ...로 변경해야합니다. 그리고 나는 그것이 페이지에서 일어나는 것을 볼 수 있기를 원합니다.
— Tom
1
오 젠장, 네 말이 맞아 이제 아무런 효과가없는 경우 Chrome에서 왜 아무것도 편집 할 수 있는지 궁금합니다.
— gnur
"다른 이름으로 저장 ..."은 파일을 컴퓨터에만 저장합니다. 페이지를 다시로드 한 후에는 변경 사항이 적용되지 않습니다. 디버깅을 위해 JS 파일에 변경 사항을 적용하려면 Opera를 사용할 수 있습니다.
— XP1
1
및 tincr이라는 하나 chrome.google.com/webstore/detail/...
— JustGoscha
3

이것은 JS의 실시간 편집을 다루는 매우 인기있는 질문이므로 다른 유용한 옵션을 지적하고 싶습니다. svjacob의 답변에서 설명한 바와 같이 :

동적으로 편집하기 전에 디버거의 중단 점을 일부 코드 줄에 첨부 할 수 있다는 것을 깨달았습니다. 그리고 페이지를 다시로드 한 후에도 중단 점이 유지되므로 중단 점에서 일시 중지 된 상태에서 원하는 변경 내용을 편집 한 다음 페이지를 계속로드 할 수있었습니다.

위의 솔루션은 꽤 큰 JS (웹 팩 번들-3.21MB 축소 버전, 사전 버전의 130k 코드 라인)에서 작동하지 않았습니다. 크롬이 충돌하고 저장된 변경 사항을 되돌릴 페이지 다시로드를 요청했습니다. 이 경우에는 Fiddler 를 사용하여 원격 리소스를 컴퓨터의 로컬 파일로 바꾸도록 자동 응답 옵션을 설정할 수 있습니다 . 자세한 내용은이 SO 질문을 참조하십시오 .

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

— 도미니크
소스
2

버튼 클릭으로 실행되는 자바 스크립트가 소스> 소스 (크롬의 개발자 도구에서)에서 변경하고 Ctrl + S를 눌러 저장하면 충분 합니다. 나는 항상 이것을한다.

페이지를 새로 고침하면 자바 스크립트 변경 사항이 사라지지만 크롬은 여전히 ​​중단 점을 기억합니다.

— 개발자
소스
2

이제 Google 크롬에 새로운 기능이 도입되었습니다. 이 기능을 사용하면 크롬 탐색에서 코드를 편집 할 수 있습니다. (코드 위치에 대한 영구적 인 변경)

이를 위해 F12-> 소스 탭-(오른쪽)-> 파일 시스템-을 눌러 코드 위치를 선택하십시오. 그런 다음 크롬 브라우저가 허가를 요청하고 그 코드가 녹색으로 싱크됩니다. 코드를 수정할 수 있으며 코드 위치에도 반영됩니다 (영구적으로 변경됨)

감사

— 스택 정보
소스
2

@mark의 답변과 마찬가지로 Chrome DevTools override에서 기본 JavaScript 로 스 니펫을 만들 수 있습니다 . 마지막으로 페이지에 어떤 영향을 미치는지 볼 수 있습니다.

영상

— 카미 와인
소스
1

여기 내가 작성한 크롬의 js 디버거에 대한 부드러운 소개가 있습니다. 어쩌면 다른 사람들이 이것에 대한 정보를 찾는 데 도움이 될 것입니다 : http://meeech.amihod.com/getting-started-with-javascript-debugging-in-chrome/

— meeech
소스
1
좋은 글씨입니다. 불행히도, 디버거에서 JS를 편집하는 것은 아무 문제가 없습니다.
— Bruno Bronosky
동의하지 않는다. 마지막에 질문의 일부인 Chrome 디버거에서 JavaScript 코드를 "동적으로"편집하는 방법에 대한 예를 구체적으로 보여줍니다.
— meeech
1
meeech, 내가 오해하지 않는 한 , 콘솔에서 JS 를 평가 하는 방법을 보여줍니다 . 함수를 편집하는 것과는 다르므로 나중에 함수가 호출 될 때 다르게 동작합니다.
— Bruno Bronosky
그럴 수 있지. 나는 편집이 라이브 페이지의 값에 대한 변화를 의미한다는 것을 이해했으며 콘솔에 일단 있으면 값을 사용하고 실행 컨텍스트에서 js를 사용할 수 있기 때문에 쓰기가 도움이 될 것이라고 생각했습니다.
— meeech
1
예, 미 에크, 난 당신이 몇 년 동안 당신이 묘사 한 것을 정확히 했어. 방금 이벤트 핸들러를 변경하기 위해 좋은 피드백 루프를 얻을 수 없다는 것에 좌절했습니다. 특히 페이지로드 중에 트리거되는 항목. AaronLS와 나는 gnur의 답변에 대한 의견에서 논의했듯이 DevTools> Sources> Sources에서 편집하면 작동하지 않으며 때로는 작동하지 않습니다. 그러나 그것이 작동하면 꽤 달콤합니다!
— Bruno Bronosky
1

Chrome 디버거의 소스 탭 아래에서 javascrpit 파일을 동적으로 편집 할 수 있지만 페이지를 새로 고치면 변경 사항이 손실되고 변경 사항을 수행하기 전에 페이지로드를 일시 중지하려면 중단 점 을 설정 한 후 페이지를 다시로드해야합니다. 변경 사항을 편집하고 마지막으로 디버거를 일시 중지하여 변경 사항이 적용되는지 확인하십시오. 크롬 디버거

— 세이프 타 말라
소스
크롬이 중단 점에서 멈추도록 콘솔을 열어 두어야합니다. 그렇지 않으면 크롬이 중단 점을 무시합니다
— Seif Tamallah
작동하지 않는. F5를 사용하여 다시로드하고 파일을 변경 한 다음 실행을 계속하고 방금 수정 한 것과 동일한 오류가 발생합니다. 메인 페이지 옆에있는 js 파일입니다.
— darkgaze
1

스크립트를 변경하고 새 스크립트를 디버깅하는 방법을 찾고있었습니다. 내가 그렇게하는 방법은 다음과 같습니다.

  1. 변경하고 디버그하려는 스크립트의 첫 번째 줄에 중단 점을 설정하십시오.

  2. 중단 점에 도달하도록 페이지를 다시로드하십시오.

  3. 새 스크립트를 붙여넣고 원하는 중단 점을 설정하십시오.

  4. Ctrl + s를 누르면 페이지가 새로 고침되어 첫 번째 줄의 해당 중단 점이 발생합니다.

  5. F8을 계속 진행하면 리디렉션 및 새로 고침이 수행되지 않는 한 새로 붙여 넣은 스크립트가 원본 스크립트를 대체합니다.

— 100r
소스
0

Chrome에서 '재정의'를 사용하면 원본 소스를 호스팅하지 않는 경우에도 페이지로드간에 자바 스크립트 변경 사항을 유지할 수 있습니다.

  1. 개발자 도구> 소스> 재정의에서 폴더를 만듭니다.
  2. Chrome에서 폴더에 대한 권한을 요청하고 허용을 클릭합니다.
  3. 소스> 페이지에서 파일을 편집 한 후 저장하십시오 (ctrl-s). 자주색 점은 파일이 로컬에 저장되었음을 나타냅니다.

Chrome 개발자 도구의 재정의 하위 탭

— 마크 포먼
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.