JavaScript : Chrome 디버거 도구에서 조건부 중단 점을 설정하는 방법


100

나는 날짜를 continosly로 인쇄하는 간단한 js 파일이 있습니다.

Google 크롬 디버거 도구를 사용하고 있습니다 (F12).

내 질문은 Google 크롬에서 조건부 중단 점을 설정할 수 있습니까?

내 코드에서 초 값이 50이면 중단 점을 설정하고 싶습니다 ??

s = date.getSeconds();

이것은 내 소스가있는 jsfiddle입니다.

(왜 jsfiddle에서 작동하지 않는지 확실하지 않음)

어쨌든 내 질문은, 크롬 디버거 도구에서 조건 적 중단 점을 설정할 수 있습니까?


1
이 질문에 답하기 위해 문서를 확인하기 전까지는 가능할지 몰랐기 때문에 +1했습니다. 감사!
Theraot 2013 년

답변:


141

예, 가능합니다.

중단 점의 마커를 마우스 오른쪽 버튼으로 클릭하고 "중단 점 편집 ..."을 선택하여 조건을 설정할 수 있습니다.

에서 중단 점에 크롬 개발자 도구 developers.google.com (강조 광산)에서 :

참고 : 설정 한 모든 중단 점은 오른쪽 사이드 바의 중단 점 아래에 나타납니다. 항목을 클릭하면 소스 파일에서 강조 표시된 줄로 이동합니다. 중단 점이 설정되면 파란색 태그 중단 점 표시기를 마우스 오른쪽 단추로 클릭하여 해당 중단 점에 대한 조건문설정합니다 . 표현식을 입력하면 조건이 참인 경우에만 중단 점이 일시 중지됩니다.


감사합니다, 나는 당신이 언급했듯이 중단 점을 편집하고 if (s == 50)을 설정했지만 왜 그 조건에서 멈추지 않습니까?
Pawan

2
@PreethiJain은 "s == 50"(따옴표없이) 조건 만 작성합니다. 그건 그렇고, 나는 jsfiddle에서 jsfiddle을 만들 수있었습니다 : jsfiddle.net/nVpXN/6
Theraot

6
시작하기 위해 중단 점을 추가 할 필요조차 없습니다. 바로 라인을 마우스 오른쪽 버튼으로 클릭하고 "조건부 중단 점 추가 ..."를 클릭하십시오 .
Martin Ender 2013 년

2
2017 년입니다. Chrome에 대한 새로운 기본 사항을 배우고 있습니다. #Awesomeness
The Qodesmith 17.01.25

1
이것은 코드 실행의이 시점에서 문을 확인한 다음 만약 그렇다면 중단됩니다. if 문 내의 중단 점과 동일합니다. OP는 디버거가 각 문 실행에서 조건이 충족되는지 여부와 디버거 가이 줄에서 중단되는지 확인하고 싶었습니다. 이 동작은 변수가 예상치 못한 일을 수행하는 경우를 알아 내기 위해 형사 역할을 할 필요가 없기 때문에 훨씬 더 유용합니다.
ejectamenta

27

보세요 debugger성명서를 . 기본적으로 사용 가능한 모든 디버거 도구를 호출하며 Chrome에서는 인터프리터가 중단 점을 충족하는 것처럼 작동합니다.

코드는 다음과 같습니다.

s = date.getSeconds();
if (s == 50) {
   debugger;
}

에서 참조 :

[디버거] 사용 가능한 디버깅 기능을 호출합니다. 디버깅 기능을 사용할 수없는 경우이 문은 효과가 없습니다.


사실 이것은 원래 질문이 요청 된 원래 방식의 정신에 더 가깝지만 훌륭한 정보입니다. 진짜 질문은 ECMAscript가 아니라 Chrome 도구에 관한 것이라고 생각합니다. 그 말은; 추가해야 할주의 사항이 있습니다 debugger. 프로덕션 코드에서 모든 호출을 제거하십시오 . (디버거가 주변에 있으면 linting이 오류를 던질 것이라고 확신하지만 주제가 제기 될 때마다 호출 할 가치가 있습니다).
Crispen Smith

1
디버거 문이 필요하지 않습니다. if 안에 빈 문을 넣고 거기에 중단 점을 추가 할 수도 있습니다.
ejectamenta

8

다음 단계에 따라 Chrome에서 조건부 중단 점을 설정할 수 있습니다.

1. 중지하려는 중단 점을 마우스 오른쪽 버튼으로 클릭하고 여기에 이미지 설명 입력

2. "조건부 중단 점 추가"를 클릭하면 하나의 텍스트가 표시되고 조건을 추가 할 수 있습니다 (조건이 충족되면 결과는 '참', 그렇지 않으면 '거짓'), 중단 점 색상은 조건이 추가 된 후 주황색으로 바뀝니다. chk on 여기에 이미지 설명 입력

3. 동일한 페이지를 다시로드하면 조건이 다음과 같이 충족되면 중단 점이 작동하는 것을 볼 수 있습니다. 여기에 이미지 설명 입력

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