【Chrome Developer Tools】 자바 스크립트에 중단 점을 붙여 디버깅하는 방법
사실, Chrome 표준 Developer Tools를 사용하면 JavaScript도 중단 점을 붙여 디버그 실행할 수 있습니다
조속히 사용해 봅시다.
이 기사에서 배우는 것
검증 프로그램
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title></title>
<script type="text/javascript">
function button2Push() {
if (document.getElementById("vesi1").checked) {
console.log("なす");
}
if (document.getElementById("vesi2").checked) {
console.log("ピーマン");
}
if (document.getElementById("vesi3").checked) {
console.log("かぼちゃ");
}
if (document.getElementById("vesi4").checked) {
console.log("えだまめ");
}
console.log("-----------------------");
};
</script>
</head>
<body style="margin: 30px;">
<p style="font-size: 120%;margin: 0px;"><b>お題２</b></p>
<p>すきな野菜を選んでください。</p>
<form name="test2">
<input type="radio" id="vesi1" />なす
<br />
<input type="radio" id="vesi2" />ピーマン
<br />
<input type="radio" id="vesi3" />かぼちゃ
<br />
<input type="radio" id="vesi4" />えだまめ
<br />
------------------------------------------------
<br />
<input type="button" id="button2" name="button2" value="押してみる。" onclick="button2Push();">
</form>
</body>
</html>
화면 이미지
동작 이미지
좋아하는 야채의 라디오를 버튼을 선택하고, 「누르고 본다.」버튼을 누르면, 콘솔 로그에 선택한 야채의 이름이 출력됩니다.
콘솔 로그를 확인하는 방법은이 기사를 참조하십시오 
【Chrome Developer Tools】실례로 배우는 console 탭으로 할 수 있는 것～JavaScript 디버그편
1. 파일 보기
F12를 시작하고 Developer Tools를 시작한 후 Sorce 탭을 엽니다.
그런 다음 브레이크하려는 JavaScript가 작성된 파일을 표시합니다.
위 그림에서 빨간색 선을 당긴 부분이 소스 파일이므로 더블 클릭합니다.
표시되지 않으면 녹색 원으로 표시된 아이콘을 클릭하십시오.
숨겨진 모드에 있을 수 있습니다.
2. 브레이크 포인트를 치다
소스가 표시되면 중단하려는 행의 행 번호를 클릭합니다.
그러면 행 번호에 파란색 레이블이 켜집니다 
포인트는 「반드시 멈추는 장소에서 브레이크를 치는 것」입니다.
멈출 것 같은 장소를 모르는 경우, 브레이크를 위해서만, 일시적으로 console.log() 를 넣는 것도 개미입니다.
3. 자바스크립트 실행
이번의 검증 소스라면, 「밀어 본다.」버튼을 누르게 됩니다.
제대로 중단되면 브라우저 화면 한쪽에 회색 필터가 걸립니다.
1)과 3) → 실행 버튼
파란색 화살표가 브레이크 포인트만을 쫓는 버튼으로, 검은 구부러진 화살표가 1행마다의 스텝 실행 버튼입니다.
파란색 화살표는 F8이고 검은색 화살표는 F10 키라도 각각 실행 가능합니다.
2)→브레이크 개소
멈춘 중단점의 행은 파란색으로 강조 표시됩니다.
덧붙여서, 이 상태에서 변수에 커서를 맞추면 아래 그림과 같이 변수의 상세가 팝업됩니다.
그리고, document.getElementById("vesi1") 등, 메소드의 구분까지 포함해 드래그 하면(자), 이렇게 메소드의 내용 단위로 팝업됩니다.
이것이 매우 편리하기 때문에 기억하면 디버깅 효율이 높아집니다 
요약
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title></title>
<script type="text/javascript">
function button2Push() {
if (document.getElementById("vesi1").checked) {
console.log("なす");
}
if (document.getElementById("vesi2").checked) {
console.log("ピーマン");
}
if (document.getElementById("vesi3").checked) {
console.log("かぼちゃ");
}
if (document.getElementById("vesi4").checked) {
console.log("えだまめ");
}
console.log("-----------------------");
};
</script>
</head>
<body style="margin: 30px;">
<p style="font-size: 120%;margin: 0px;"><b>お題２</b></p>
<p>すきな野菜を選んでください。</p>
<form name="test2">
<input type="radio" id="vesi1" />なす
<br />
<input type="radio" id="vesi2" />ピーマン
<br />
<input type="radio" id="vesi3" />かぼちゃ
<br />
<input type="radio" id="vesi4" />えだまめ
<br />
------------------------------------------------
<br />
<input type="button" id="button2" name="button2" value="押してみる。" onclick="button2Push();">
</form>
</body>
</html>
F12를 시작하고 Developer Tools를 시작한 후 Sorce 탭을 엽니다.
그런 다음 브레이크하려는 JavaScript가 작성된 파일을 표시합니다.
위 그림에서 빨간색 선을 당긴 부분이 소스 파일이므로 더블 클릭합니다.
표시되지 않으면 녹색 원으로 표시된 아이콘을 클릭하십시오.
숨겨진 모드에 있을 수 있습니다.
2. 브레이크 포인트를 치다
소스가 표시되면 중단하려는 행의 행 번호를 클릭합니다.
그러면 행 번호에 파란색 레이블이 켜집니다
포인트는 「반드시 멈추는 장소에서 브레이크를 치는 것」입니다.
멈출 것 같은 장소를 모르는 경우, 브레이크를 위해서만, 일시적으로 console.log() 를 넣는 것도 개미입니다.
3. 자바스크립트 실행
이번의 검증 소스라면, 「밀어 본다.」버튼을 누르게 됩니다.
제대로 중단되면 브라우저 화면 한쪽에 회색 필터가 걸립니다.
1)과 3) → 실행 버튼
파란색 화살표가 브레이크 포인트만을 쫓는 버튼으로, 검은 구부러진 화살표가 1행마다의 스텝 실행 버튼입니다.
파란색 화살표는 F8이고 검은색 화살표는 F10 키라도 각각 실행 가능합니다.
2)→브레이크 개소
멈춘 중단점의 행은 파란색으로 강조 표시됩니다.
덧붙여서, 이 상태에서 변수에 커서를 맞추면 아래 그림과 같이 변수의 상세가 팝업됩니다.
그리고, document.getElementById("vesi1") 등, 메소드의 구분까지 포함해 드래그 하면(자), 이렇게 메소드의 내용 단위로 팝업됩니다.
이것이 매우 편리하기 때문에 기억하면 디버깅 효율이 높아집니다
요약
이번의 검증 소스라면, 「밀어 본다.」버튼을 누르게 됩니다.
제대로 중단되면 브라우저 화면 한쪽에 회색 필터가 걸립니다.
1)과 3) → 실행 버튼
파란색 화살표가 브레이크 포인트만을 쫓는 버튼으로, 검은 구부러진 화살표가 1행마다의 스텝 실행 버튼입니다.
파란색 화살표는 F8이고 검은색 화살표는 F10 키라도 각각 실행 가능합니다.
2)→브레이크 개소
멈춘 중단점의 행은 파란색으로 강조 표시됩니다.
덧붙여서, 이 상태에서 변수에 커서를 맞추면 아래 그림과 같이 변수의 상세가 팝업됩니다.
그리고,
document.getElementById("vesi1") 등, 메소드의 구분까지 포함해 드래그 하면(자), 이렇게 메소드의 내용 단위로 팝업됩니다.이것이 매우 편리하기 때문에 기억하면 디버깅 효율이 높아집니다
요약
console.col() 에 좋기 때문에 만들기. Reference
이 문제에 관하여(【Chrome Developer Tools】 자바 스크립트에 중단 점을 붙여 디버깅하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/mtanabe/items/ed120f145d2293c4f1da텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
