Chrome에서 디버깅 할 때 스크립트 실행을 종료하는 방법은 무엇입니까?


210

Chrome 디버거에서 JavaScript 코드를 단계별로 실행할 때 계속하지 않으려면 어떻게 스크립트 실행을 종료합니까? 내가 찾은 유일한 방법은 브라우저 창을 닫는 것입니다.

"Reload this page"를 누르면 나머지 코드가 실행되고 F8 "Continue"를 누른 것처럼 양식을 제출합니다.

업데이트 :

스크립트가 일시 정지 된 상태에서 F5 (새로 고침)를 누르면 :

  • Chrome (v22)은 스크립트를 실행합니다. 스크립트가 HTTP 요청을 제출하면 해당 요청에 대한 HTTP 응답이 표시됩니다. 원본 페이지가 새로 고쳐지지 않습니다.
  • IE 9는 멈 춥니 다. 그러나 IE에는 "Stop Debugging"옵션이 있는데,이 버튼을 누르면 (F5를 누르지 않은 경우) 디버거 외부에서 스크립트를 계속 실행합니다.
  • Firebug는 Chrome과 동일하게 작동합니다.

브라우저 창을 닫았다가 다시 여는 것이 브라우저 세션 상태를 종료시키고 중요 할 수 있기 때문에 항상 다음으로 가장 쉬운 방법은 아닙니다. 모든 중단 점도 손실됩니다.

업데이트 (2014 년 1 월) :

디버깅하는 동안 새로 고침 :

  • Chrome v31 : 추가 중단 점에서 스크립트를 실행하고 중지 한 다음 (아약스 요청을 제출하지 않음) 새로 고칩니다.
  • IE 11 : 새로 고침은 아무 것도 수행하지 않지만 F5를 눌러 계속할 수 있습니다.
  • Firefox v26 : 스크립트 실행을 허용하지만 추가 중단 점에서 중지하지 않고 ajax 요청을 제출 한 다음 새로 고칩니다.

진보의 종류!

디버깅하는 동안 동일한 페이지로 이동하십시오.

  • Chrome v31 : 새로 고침과 동일합니다.
  • IE 11 : 스크립트가 종료되고 새 브라우저 세션이 시작됩니다 (닫았다가 다시 여는 것과 동일).
  • Firefox v26 : 아무 일도 일어나지 않습니다.

또한 juacala 는 효과적인 해결 방법을 제안했습니다. 예를 들어, jQuery를 사용하는 경우 콘솔에서 delete $ 를 실행하면 jQuery 메소드가 발견되면 실행이 중지됩니다. 위의 모든 브라우저에서 테스트했으며 작동하는지 확인할 수 있습니다.

업데이트 (2015 년 3 월) :

마지막으로 2 년이 넘고 거의 10 만 회의 조회 후 Alexander K가 정답을 올렸습니다. Chrome에는 자체 작업 관리자가 있어 탭 자체 닫지 않고도 탭 프로세스 종료하여 모든 중단 점 및 기타 사항을 그대로 유지할 수 있습니다.

Chrome v22에서 브라우저를 테스트하기 위해 BrowserStack.com까지 갔으며 그 당시에도 이런 방식으로 작동한다는 것을 알았습니다.

Juacala의 해결 방법은 IE 또는 Firefox에서 디버깅 할 때 여전히 유용합니다.

업데이트 (2019 년 1 월) :

Chrome 개발자 도구는 마침내 스크립트 실행을 중지하는 적절한 방법을 추가했습니다 (약간 숨겨져 있지만). 자세한 내용은 James Gentes의 답변을 참조하십시오.


12
debugger;개발자 도구 콘솔에 입력 하면 즉시 디버거에 물건을 넣고 스크립트를 중지합니다.
Jake

3
James Gentes의 답변은 2019 년에 더 나은 솔루션 인 것 같습니다
Spikolynn

1
왜 모든 사람들이 스크립트 중지에 대해 이야기하고 있습니까? 이것은 앞으로 오는 모든 "추종 / 절차"코드를 종료 / 해제하는 것입니다.
Andre Elrico

답변:


188

Chrome에는 "작업 관리자"가 있으며 Shift+ ESC또는

메뉴 → 추가 도구 → 작업 관리자

"작업 끝내기"버튼을 눌러 페이지 작업을 선택하고 종료 할 수 있습니다.


4
chrome 48이렇게하면 Dev 도구 만 닫히고 종료되지 않고 다시 열면 프로그램이 계속 실행중인 것을 볼 수 있습니다 ( tried setInterval())
Abdelouahab

11
"추가 도구"에 "작업 관리자"가 표시되지 않고 shift + esc가 아무 것도 수행하지 않습니다 ... (Chrome 50, OSX) Shift + ESC는 Chrome / Windows에서 작동하지만 ...
Michael

2
와우 — 저는 이것을 오랫동안 원해 왔으며 수년간있었습니다. 이것은 내가 일년 내내 본 가장 유용한 StackOverflow 답변입니다!
Michael Scheper

4
Macintosh (Chrome v.63)에서이 옵션은 세 번째 그룹의 "창"메뉴 아래에 표시됩니다. 키보드 단축키가 분명하지 않습니다.
Apollo

2
이것은 탭을 죽일 것입니다
htafoya

105

현재 2018년 4월, 당신은 크롬에서 무한 루프를 중지 할 수 있습니다 :

  1. 오픈 소스 개발자 도구 패널 ( Ctrl+ Shift+ I**)를.
  2. 스크립트 실행일시 중지 하려면 일시 중지 버튼을 클릭하십시오 .

또한 바로 가기 키를주의 : F8Ctrl+\

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


그 UI에 숨겨진 보석.
norbert

응답자는 우주의 비밀에 열쇠가 있습니다.
Sam

바로 가기는 끝없이 실행중인 스크립트가 있고 콘솔 확인을 중지하려는 경우에 특히 유용합니다. 감사.
Alexei

@DanDascalescu 나는 크롬 80.0.3987.149을 가지고 동일한 모양
제임스 씨족

다른 실행 상태의 버튼을보고 있을까요? 내 생각에 body여기에서 요소를 선택하고 "break on-> subtree 수정"을 설정 한 다음 어디에서나 클릭했습니다. 버튼은 내가 게시 한 스크린 샷과 같습니다.
Dan Dascalescu

37

이를 수행 할 수있는 한 가지 방법은 스크립트를 일시 중지하고 현재 중지 된 곳에서 어떤 코드가 뒤에 오는지 확인하는 것입니다. 예 :

var something = somethingElse.blah;

콘솔에서 다음을 수행하십시오.

delete somethingElse;

그런 다음 스크립트를 재생하십시오. 액세스하려고하면 치명적인 오류가 발생 somethingElse하고 스크립트가 종료됩니다. Voila, 당신은 스크립트를 종료했습니다.

편집 : 원래 변수를 삭제했습니다. 충분하지 않습니다. JavaScript가 속성에 액세스하려고하는 함수 또는 객체를 삭제해야합니다.


3
you have to delete a function or an object그런 불쾌한 해킹! (UI에서 그것은 모든 버튼 을 죽이는 것처럼 잘 맞을 것입니다 )
Mars Robertson

꽤 불쾌하지만 다른 방법으로는 생각할 수 없습니다.
juacala

몇 년 후 나는 같은 질문으로 돌아가고있다. 그리고 나는 그것을 알아낼 수 없다! 좀 더 일반적인 방법이 있습니까?
Mars Robertson

스크립트 실행을 종료하는 방법을 알 수 없습니까? 나는 항상 이것을 할 수 있었다. 이런 식으로 스크립트를 죽이지 못하게하는 예제가 있습니까?
juacala

1
@Hashim, 함수 안에 중단 점을 넣을 수 있어야합니다. 따라서 함수 내부가 함수 정의와 별도의 행에 있는지 확인하십시오. 귀하의 경우, 콘솔에서 일시 중지되면 "document.getElementById ( 'see_older'). parentNode.removeChild (document.getElementById ( 'see_older'));"를 입력해야합니다. 이것은 자바 스크립트에 침입 할 것이 없기 때문입니다. 불행히도 이로 인해 HTML도 변경됩니다. 코드를 "var el = document.getElementById ( 'see_older'); \ n el.getEl ..."로 변경할 수 있다면 "delete el;" 그리고 그것은 그것을 멈출 것입니다.
juacala

12

2020 년 4 월 업데이트

Chrome 80부터 현재 답변이 작동하지 않습니다. "일시 정지"버튼이 보이지 않습니다. "재생"버튼을 길게 클릭하여 중지 아이콘에 액세스해야합니다.

Chrome DevTools에서 스크립트 실행 중지


2
신 감사합니다! OP의 질문에 대한 실제 답변.
user1023110

1
@ user1023110 : 나는 신에 대해 모른다. 그러나 당신은 환영한다 :)
Dan Dascalescu

5

debugger명령문 을 사용하는 동안이 문제가 발생하면

debugger;

... 그런 다음 js 런타임이 나올 때까지 또는 다음 중단 때까지 페이지가 계속 실행될 것이라고 생각합니다. 오류시 중단 모드 (일시 중지 아이콘 전환)에 있다고 가정하면 다음과 같이 대신 중단이 발생하도록 할 수 있습니다.

debugger;throw 1;

또는 존재하지 않는 함수를 호출 할 수 있습니다.

debugger;z();

(물론 이것은 당신이 비록 아마 당신이 동적으로 추가 할 수 있습니다, 함수를 통해 단계를 시도하는 경우에 도움이되지 않는 가운데 throw 1하거나 z()또는 소스 패널에서 somesuch, CTRL-S는 저장하고 Ctrl-R은 ...이 새로 고침 그러나 하나의 중단 점을 건너 뛸 수 있지만 루프 상태 인 경우 작동 할 수 있습니다.)

루프를 수행하고 debugger명령문을 다시 트리거하려면 throw 1대신 입력하십시오 .

throw 1;

그런 다음 ctrl-R을 누르면 다음 던지기가 발생하고 페이지가 새로 고쳐집니다.

(2017 년 4 월경 Chrome v38에서 테스트)


3

좋은 질문입니다. 스크립트 실행을 종료 할 수 없다고 생각합니다. 나는 그것을 찾지 못했지만 크롬 디버거를 오랫동안 사용했습니다. 나는 보통 자바 스크립트 코드에 중단 점을 설정 한 다음 관심있는 코드 부분을 디버깅한다. 해당 코드 디버깅을 마치면 보통 프로그램의 나머지 부분을 실행하거나 브라우저를 새로 고침한다.

스크립트의 나머지 부분이 실행되는 것을 방지하려면 (예 : AJAX 호출로 인해) 콘솔에서 해당 코드를 즉시 제거하여 해당 호출을 방지 할 수 있습니다 실행 되지 않으면 나머지 코드를 문제없이 실행할 수 있습니다.

이게 도움이 되길 바란다!

추신 : 다음 자습서와 같은 일부 자습서 / 안내서에서 실행을 종료하는 옵션을 찾으려고했지만 찾을 수 없었습니다. 앞서 말했듯이, 아마도 그러한 옵션이 없을 것입니다.

http://www.codeproject.com/Articles/273129/Beginner-Guide-to-Page-and-Script-Debugging-with-C

http://www.nsbasic.com/app/tutorials/TT10.htm


도와 줬어요? 종료 옵션이없는 것 같지만 다음 코드의 실행을 막기 위해 Chrome 디버거에서 다음 코드 / 호출 "실시간"을 삭제하거나 삭제할 수 있습니다 (이 후자의 옵션은 계속 버튼을 만듭니다) 종료처럼 행동). 나는 이것이 이상적인 솔루션은 아니지만 가장 수용 가능한 솔루션이라고 생각합니다. 다른하실 말씀 있나요?
Romén Rodríguez-Gil

1
대부분의 경우 실행을 방지해야하는 코드는 콜 스택 (현재 함수가 반환 된 후 제어 할 함수)입니다. 물론, 호출 스택까지 함수를 이동하여 편집 한 다음 비동기 적으로 호출 될 수있는 모든 함수를 찾아서 편집 할 수 있습니다. 페이지 새로 고침 버튼을 눌렀을 때 일시 중지 된 경우 브라우저가 스크립트를 일시 중지 된 상태로 페이지를 새로 고치는 것은 사소한 일이어야합니다. 또한 모든 브라우저에서 예상되는 동작이어야한다고 생각합니다 (불행히도 그렇지 않습니다).
srgstm

2
실제로 스크립트 실행을 종료하는 해결 방법을 찾았습니다! : 크롬에서 디버거를 열어 응용 프로그램 중 하나를 디버깅하고 중단 점을 설정했습니다. 나는 페이지를 운영한다. 중단 점에서 실행이 일시 정지됩니다. 그런 다음 문제를 조사하고 버그의 원인을 파악합니다. 실행을 종료하려면 URL 옆에있는 X 버튼을 클릭하고 (페이지로드를 중지) 스크립트 (F8)를 계속하면 종료됩니다. 쉽게 달성 할 수있는 방법이라고 생각합니다. 이것에 대해 어떻게 생각하십니까?
Romén Rodríguez-Gil

Chrome의 X 버튼은 페이지가로드 된 후 새로 고침 버튼으로 바뀌므로 나중에 X를 누를 방법이 없습니다 (X는 항상 사용할 수 있지만 IE는 항상 멈 춥니 다). 또한 페이지를로드하는 동안 귀하의 제안을 테스트했으며 X와 F8을 누른 후에 스크립트가 종료되지 않는 것으로 나타났습니다. X를 눌렀을 때 브라우저에 아직로드되지 않은 스크립트는 나중에로드되지 않지만 분명해야합니다.
srgstm

아, 맞아요. 빠른 테스트 였고 대표가 아니 었습니다 ... 그렇다면 해결책이없는 것 같습니다.
Romén Rodríguez-Gil

3

@scottndecker의 다음 질문에 대한 답변을 참조 하면 Chrome은 이제 개발자 도구에서 'JavaScript 비활성화'옵션을 제공합니다.

  • ...오른쪽 상단의 세로
  • 설정
  • '환경 설정'에서 맨 아래의 '디버거'섹션으로 이동하여 'JavaScript 비활성화'를 선택하십시오.

좋은 점은 체크 / 체크 해제하는 것만으로 중지했다가 다시 실행할 수 있다는 것입니다.


1
당신이 개발자 도구 메뉴와 크롬 메뉴 사이를 혼동하고 있기 때문에 당신이 downvote 경우는 :( 매우 슬픈
theFreedomBanana

나를 위해 작동하지 않았다. JavaScript 비활성화 확인란을 선택했지만 스크립트는 계속 실행됩니다.
Paul Gorbas

1

할 수는 있지만 먼저 코드를 준비해야합니다.

Chrome 개발자 도구에서 스크립트 실행을 중지하기위한 지침 :

(1) 전역 변수 를 작성하여 먼저 코드를 준비하십시오 .

var devquit=0;
$(document).ready({
    //the rest of your code

(2) 종료하고 싶을 때이 변수의 값을 테스트하십시오.

//Lotsa code
if (devquit > 0) return false;

(3) 위의 테스트 라인 이전 또는 이전에 스크립트 실행 일시 중지

(4) 콘솔로 전환

(5) 유형 :

> devquit
0
> devquit=1   <=== only this line is necessary
> devquit
1

(6) 스크립트 실행을 계속하십시오. return false위의 2 단계에서 테스트를 실행할 때 스크립트가


노트:

(A)이 트릭은 전역 변수 및 객체에는 작동하지만 지역 변수에는 작동하지 않습니다. 이 것을 참고 :
newVar = 'never used before';
창 개체의 새 속성을 생성합니다 (위의 트릭 작품), 이 동안 :
var newVar = 'never used before';
로컬 변수를 생성한다 (! 않습니다 위의 트릭하지 작업)

(B) 따라서 전역 변수 또는 주어진 값이 있으면 false를 반환하는 객체가있는 경우 이미 실행중인 코드와 함께이 트릭을 사용할 수 있습니다 .

(C) 핀치에서 juacala의 트릭을 사용하고 요소 탭의 DOM에서 요소를 삭제하여 Javascript 오류가 발생할 수 있습니다. 예를 들어, 코드가 있다고 가정하면 해당 코드 행 앞에 var cartype = $('#cartype').val();ID = 인 요소를 삭제하면 cartype해당 행에서 js가 중단됩니다. 그러나 코드를 다시 실행하려고하면 요소가 여전히 누락됩니다. 위에서 설명한 트릭을 사용하면 코드 광고를 무한대 로 실행하고 다시 실행할 수 있습니다 .


더 많은 메모 :

(a) 코드에 중단 점 삽입 : debugger;한 줄만 입력 하면됩니다. DevTools가 열려 있으면 스크립트가 해당 시점에서 디버거로 이동합니다. DevTools가 열리지 않으면 코드는 명령문을 무시합니다.

(b) 코드를 디버깅 할 때 jQuery 라이브러리로 점프하지 않으시겠습니까? 블랙 박스 Chrome 또는 Firefox 용 블랙 박스 안내를 참조 하세요.


감사 (방문 및 투표) :

Chrome을 사용하여 한 줄씩 자바 스크립트 디버깅

Chrome에서 디버깅하는 동안 자바 스크립트 변수 값을 변경할 수 있습니까?


2
Any place where you may wish to quit, test the value of this variable그건 정말 나쁘다! 나는 지금 밟고있을 수있는 곳을 그만두고 싶다. 나는 그것이 어디에 있는지 미리 모른다.
Michael

코드 측 작업을 기꺼이하려는 경우 스크립트 실행을 중지하려는 클라이언트에서 가장 사용자 친화적입니다.
Goose

??? 전역 변수가 필요하지 않습니다. 그냥 이 버튼을 클릭합니다 .
Dan Dascalescu

0

이러한 종류의 시나리오를 디버깅하는 동안 매우 유용한 XHR 패턴을 일시 중지 할 수 있습니다.

예를 들어 "/"를 포함하는 URL 패턴에 중단 점을 지정했습니다.

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


0

불량 루프가있는 경우 Chrome 디버거 ( ||소스 탭 의 작은 " "버튼) 에서 코드를 일시 중지하십시오 .

Chrome으로 다시 전환하고 "작업 관리자"( Shift+ ESC)를 열고 탭을 선택한 다음 "프로세스 종료"버튼을 클릭하십시오.

Aww Snap 메시지가 표시되면 다시로드 할 수 있습니다 ( F5).

다른 사람들이 지적했듯이, 일시 중지 시점에 페이지를 다시로드하는 것은 불량 루프를 다시 시작하는 것과 동일하며 디버거가 잠긴 경우 불쾌한 잠금을 유발할 수 있습니다 (일부 경우 크롬 또는 PC를 다시 시작하게 함). 디버거에는 "중지"버튼이 필요합니다. Nb : 현재 답변 중 일부는 현재 틀렸다는 점에서 구식입니다. 당신이 저를 투표하면, pls는 설명 :) .



-1

'개발자 도구'에서 소스 탭을 열고 실행중인 스크립트에서 줄 번호를 클릭하면 중단 점이 생성되고 디버거가 중단됩니다.


-1

이 게시물에서 위에서 언급 한 것처럼이 문제에 대한 적절한 해결책이 많이 있지만 스크립트에서 삽입하거나 Chrome 콘솔 (디버거)에 붙여 넣을 수있는 작은 해킹을 발견했습니다.

jQuery(window).keydown(function(e) { if (e.keyCode == 123) debugger; });

이렇게하면를 누를 때 실행이 일시 중지됩니다 F12.


jQuery를 사용하지 않으면 어떻게 되나요?
Dan Dascalescu

그런 다음 document.addEveneListner ..와 같은 순수한 Javascript를 사용하여 키 다운 이벤트를
받으십시오
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.