WebStorm+Chrome+BrowserSync에서 JavaScript 디버깅

"WebStorm"과 JetBrains 제품에서 공통으로 사용되는 Chrome 플러그인 "JetBrains IDE Support"을 사용하면 브라우저에서 실행되는 JavaScript도 실제 디버깅을 할 수 있습니다.
이번에 나는 그 디버깅 방법을 소개하고 싶다.
사용하는 웹 서버는 최근 선호하는 "BrowserSync"를 사용합니다.

이번에 할 일

WebStorm 콘솔에서 로그 출력

WebStorm 편집기에서 변수/속성의 내용을 실시간으로 표시

WebStorm에서 중단점 설정, JavaScript 일시 중지
→ 호출된 창고 찾기, 변수/속성 찾기

작업 환경

Windows 7 64bit

WebStorm 9
→ 최신 릴리스

JetBrains IDE Support 2.0.7
→ Chrome 플러그인의 최신 버전

차리다

설치WebStorm

JetBrains IDE Support-Chrome 웹 스토어에서 Chrome로 플러그인 설치

BrowserSync 환경 구축
→ 예전에 "여러 브라우저/터미널 동기화 브라우저 Sync가 편리함"라는 글을 쓴 적이 있으니 참고하시기 바랍니다.

BrowserSync 시작

BrowserSync를 디버깅을 위한 웹 서버로 시작합니다.
URL은 기본값http://localhost:3000/에 설명되어 있습니다.

WebStorm 설정

WebStorm에서 항목을 열고 메뉴 모음에서 Run->Edit Configurations...를 클릭하여 Run/Deug Configurations 대화 상자를 엽니다.
(이하, 실행/디버깅 구성으로 직역)
그리고 왼쪽 상단의 + 단추를 누르고 JavaScript Debug 를 선택하십시오.

다음으로 Name란에 적당한 이름을 입력하고 URL에서 이전 BrowserSync의 서버 URL, Browser의Chrome를 선택합니다.

항목 설정

Name: BrowserSync Debug

URL: http://localhost:3000/

Browser: Chrome

Remote URLs of local files: 특별한 설정 없음

마지막Remote URLs of local files 웹 서버의 루트 디렉터리는 프로젝트의 루트 디렉터리와 다르다.
이 관계가 올바르게 설정되면 디버거를 통해 파일을 열 때 로컬 파일을 참조하여 편집할 수 있습니다.
반대로 설정이 잘못되면 웹 서버의 파일이 읽기 전용으로 열리므로 주의해야 합니다.
이번에는 설명을 간소화하기 위해 프로젝트의 루트 디렉터리를 웹 서버의 문서 경로와 동일하게 설정했기 때문에 특별히 설정하지 않았습니다.

샘플 코드

테스트 테스트용 샘플 코드는 다음과 같다.
index.js

// グローバル変数
var global;

$(document).ready(function () {
    console.log("start"); // コンソール出力

    // ローカル変数
    var local;

    // set1ボタンクリックで各変数に1を代入
    $("#set1").click(function(){
        local = 1;
        global = 1;
        console.log(global, local); // コンソール出力
    });
    // set2ボタンクリックで各変数に2を代入
    $("#set2").click(function(){
        local = 2;
        global = 2;
        console.log(global, local); // コンソール出力
    });

});

HTML의 원본 코드는 특별히 기록되지 않았지만 idset1와 set2의 단추를 설정하면 자바스크립트가 그 단추를 누르면 변수global와 local의 값이 바뀐다.
JS 파일은 index.js이라는 이름으로 프로젝트의 노선에 놓여 있다.
또한 HTML 파일은 index.html 라는 이름으로 노선에 똑같이 놓여 있다.

디버거 시작

그리고 WebStorm 화면 오른쪽 상단에 있는 벌레 아이콘 단추를 누르면 디버거를 시작합니다.
신중을 기하기 위해 왼쪽 드롭다운 메뉴가 방금 만든 것BrowserSync Debug을 확인하세요.
이번에 제작된 것 외에 다른'실행/디버깅 구성'이 준비되어 있다면 여기서 선택하세요.

참고로 Shift+F9의 단축키를 사용하면 디버깅 모드 (벌레 아이콘) 에서 현재 '실행/디버깅 구성' 을 시작할 수 있습니다.
크롬이 시작되면 방금 지정한 BrowserSync 서버의 웹 사이트가 표시됩니다.

웹스톰과의 연결이 성공하면 노란 술집이 자주 등장한다.
그나저나 크롬의 개발자 도구를 열면 연결이 해제되기 때문에 주의가 필요하다.
스마트폰 등 모조품과 함께 사용할 수 없어 아쉽다.

WebStorm 콘솔에서 로그 출력

이 상태에서 WebStorm의 화면 왼쪽 하단으로 눈을 돌리면 디버깅Console 탭에서 출력된 로그가 표시됩니다.

또한 로그 오른쪽에 있는 파일 이름 + 줄 번호를 누르면 편집기에서 파일을 열 수 있습니다.
방금 설명한 바와 같이 웹 서버의 루트 디렉터리가 프로젝트의 루트 디렉터리와 다르면 Remote URLs of local files 제대로 설정하지 않으면 웹 서버의 파일이 열립니다.
그나저나 크롬의 콘솔과 달리 대상을 내보낸 뒤에도 내용을 펼칠 수 없는 아쉬운 대목이다.

WebStorm 편집기에서 변수/속성 컨텐츠를 실시간으로 표시

WebStorm에서 아까 샘플 코드index.js를 열면 변수 근처에 마우스 커서를 사용하면 현재 값을 실시간으로 표시할 수 있습니다.

처음엔 아무것도 안 넣었으니까undefined.
페이지 내의 단추를 누르고 변수의 내용을 바꾸어 보십시오.

디스플레이가 1로 변경됩니다.
변수/속성을 쉽게 확인할 수 있는 내용입니다.

컨텐츠를 실시간으로 표시할 수 있는 변수/속성

위의 예에서, 나는 전역 변수를 간단하고 쉽게 보여 주려고 했지만, 때로는 내용을 표시할 수 없었다.
자세한 검증은 이루어지지 않았지만 루트의 윈도 대상에서 찾은 속성의 기술 부분이라면 내용을 표시할 수 있습니다.
예를 들어 샘플 코드의 로컬 변수 내용을 표시할 수 없습니다.

윈도 대상에서 찾을 수 없습니다. 함수 실행 전후에 메모리에 데이터가 없는 것 같습니다.
또한 이른바 실례 변수는 클래스 밖에서도 나타낼 수 있다

클래스 내부의 기술에서 undefined로 표시됩니다.

여러 개의 실례가 있을 때 어떤 값인지 확정할 수 없기 때문일 수도 있다.
위에서 설명한 중단점을 사용하여 JavaScript를 일시 중지하면 이러한 변수/속성의 컨텐트를 확인할 수 있습니다.

WebStorm에서 중단점 설정, JavaScript 일시 중지

그러면 WebStorm에서 중단점을 설정하고 JavaScript를 일시 중지합니다.

편집기에서 중지하려는 행의 왼쪽을 클릭하여 중단점을 설정합니다.
첫 번째 단추를 눌렀을 때 호출 함수의 시작 위치를 설정합니다.
이 상태에서 첫 번째 버튼을 누릅니다.

JavaScript가 일시 중지되면 브라우저의 페이지가 회색으로 표시됩니다.
참고로 화면에 표시된 아이콘(팽이를 보내는 것처럼)을 누르면 브라우저도 자바스크립트를 다시 시작할 수 있다.
WebStorm 편집기를 주의할 때 중단점이 강조 표시됩니다.

그리고 변수의 오른쪽에 변수 이름과 값이 추가되었는지 확인할 수 있다.
이것은 뜻밖이어서 매우 놀랐다.역시.
또한 방금 로컬 변수local도 자바스크립트가 잠시 멈추었기 때문에 현재의 작용 범위가 명확하기 때문에 내용(이때는undefined)도 뚜렷하게 나타난다.
또한 콘솔을 내보낼 때와 마찬가지로 왼쪽 아래쪽 화면으로 눈을 돌려 이번Debugger 탭이 열렸다.

이 화면에서 호출 창고를 찾거나 속성의 내용을 볼 수 있습니다.

〆

이번에는 크롬+BrowserSync의 예를 들어 Firefox용 플러그인이 있기 때문에 브라우저를 Firefox로 바꿀 수 있고, 웹 서버는 XAMPP 등 다른 서버를 사용할 수 있다고 설명했다.
자유롭게 조합할 수 있었으면 좋겠어요.
그리고 저는 평소에 Type Script를 사용하는데 원본을 정확하게 설정하는 것과 같을 수 있는지 확인하고 있습니다.
아직 많은 지식을 쌓지는 못했지만 기회가 된다면 기사도 쓰고 싶어요.