Chrome DevTools에서 javascript를 디버깅할 때 잊지 말아야 할 중요한 일

5472 단어 JavaScriptdebuggerChromeDevTool
Chrome DevTools 매우 편리하고 매일 당신의 보살핌을 받는 신의 도구입니다.
단순한 HTML의 해석부터 GPU의 사용 상황까지 열광적인 정보를 확인할 수 있다. 그 중 하나는 디버깅을 할 때 미리 설정하고 오류를 줄이면 바로 문제를 발견할 수 있다는 설정이다.

javascript 오류 발생 시 오류 보완 및 Break

Source 탭을 선택할 때 메뉴는 왼쪽 아래에 있습니다.

그중의 기능은 버튼 느낌이 있다.
이 버튼을 클릭합니다.이렇게 하면 느낌이 색깔이 바뀐다.를 다시 클릭합니다.그리고 색깔은 이런 느낌으로 바뀐다.
미리 설정하면 DevTool은 자바스크립트를 실행할 때 발생하는 오류를 감지하고 Break을 진행하기 때문에 문제가 있는 코드를 바로 발견할 수 있고 바로 오류를 발견할 수 있습니다.

Pausen Exception 정보


의 상태.자세한 내용은 공식 홈페이지Pause on Exception를 확인하세요.
쉽게 말하면 예외가 발생하면 DevTool은 이를 감지하고 해당 지점에서 Break을 배치합니다.
예를 들어 이런 코드가 있으면 Pause on Exception가 활성화되면 a.a(); 부분과 a.b() 부분에서 Break을 시작하여 디버깅을 시작합니다.
<html>
  <head>
    <script type="text/javascript" charset="utf-8">

      var onFail = function() {
        a.a();
      };

      var onTryCactch = function() {
        try {
          a.b();
        } catch(e) {
          console.log(e);
        }
      };

    </script>
  </head>
  <body>
    <input type="button" name="" value="test1" onclick="onFail()">
    <input type="button" name="" value="test2" onclick="onTryCactch()">
  </body>
</html>

Pause on Unceaugh Exception 정보


의 상태.자세한 내용은 공식 홈페이지Pause on Uncaugh Exception를 확인하세요.
쉽게 말하면try…catch 포위되지 않은 예외가 발생할 때 Devotool은 이를 감지하고 해당하는 곳에서 Break을 한다.
위의 예에서 Pause on Uncaugh Exception가 활성화된 경우 a.a();에서는 Break이 표시되지만 a.b()에서는 Break이 표시되지 않습니다.

즉


자신의 경우 디버깅 시의 상태를 유지해야 하며, 의외의 예외가 발생할 경우 즉시 주의해야 한다.
또 불검측try…catch은 설치 시 이미 고려했기 때문에 필요 없다.
CORS 이해
C# 6 - 속성

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage