VS Code에서 debugging


안녕하세요.
고코더 입니다.


이번 시간에는 노드를 실행하고 이 후에 디버깅 하는 방법을 알아봅니다. 
최근에 나오는 IDE 개발 프로그램들은 기본적으로 디버깅 환경이 구축 되어 있습니다.
MS가 만든 비주얼 스튜디오 디버깅 기능은 강력합니다. 이 기능의 차등을 두어 가격을 달리할 정도 인데요.
무료 프로그램 vscode도 필수적이고 꼭 필요한 디버깅 기능을 마련해두었습니다.



디버깅 방법


개발 프로그램에서 디버깅은 필수적이면서 가장 중요한 역할을 합니다. 이 역시도 VSCode에서는 쉽고 간편하게 사용이 가능합니다.

 1. VS Code에서는 디버깅 기능을 제공합니다. 라인 왼쪽에 빨간 점을 찍어주면 해당 부분에서 프로그램 실행이 중단되어서 디버깅이 가능합니다.


 2. 해당 상태에서 F5를 눌러 실행을 하게 되면 아래 그림처럼 화살표를 가르키면서 브레이크 포인트에서 멈추게 됩니다. 그러면 현재 상황에서 어떻게 진행 사항이 흘러갔는지 다양한 방법으로 확인이 가능합니다.


 3. 값을 가지고 변수나 함수에 마우스 커서를 올려놓으면 현재 저장되어 있는 값을 확인 가능합니다. 브레이크 포인트 상태에서 일어난 상태를 확인 가능합니다. 

 4. 그리고 에디터 아래에 디버그 콘설 탭에서 입력창에 확인하고 싶은 변수나 함수를 입력하면 값을 확인 가능합니다.




디버깅 화면 구성


해당 프로그램에서 노드를 실행하게 되면 .vscode라는 폴더가 생성되고 launch.json 이라는 파일이 생성 됩니다. 이는 디버깅 환경을 구성 가능한 설정 파일입니다.

 5. 현재 수정중인 폴더에 .vscode 폴더가 생겼고 해당 폴다 아래 launch.json 파일을 실행합니다.

 6. 해당 파일을 열어보면 환경을 확인할 수 있습니다. 스킵파일 설정을 node_internals을 주어서 코어까지 디버깅을 하지 않도록 기본설정되어 있습니다. 나머지 옵션과 사용법은 따로 블로그 글을 써서 남겨드리겠습니다.



마무리


유료 프로그램보다 나은 node 환경


댓글을 달아 주세요



반응형 홈페이지 디버깅


안녕하세요. 고코더 입니다.



개발자에게 필요한 사이트를 하나 알아내
리뷰를 남길려고 합니다

크롬에서 F12 를 누르면 
모바일을 선택해 테스트를 가능하게 만들어 놓은
기능이 있습니다.


이 기능만으로는 훌륭하나 
더 다양한 디바이스의 브라우저 크기를 알아내고 싶을때는

▼ 트로이라는 사이트가 있습니다.

▼ 사용법은 설명 드리지 않아도 될 정도 입니다.
URL을 기록하고
왼쪽의 디바이스를 선택하면
해당 환경으로 화면을 볼 수 있습니다.




왠지 다음 사내 개발자 스터디 모임에서
제작한 느낌이 나는데
도메인도 그렇고

그런거 같지 않나요.?

간단한 기능이지만 디버깅에 도움이 되는 사이트 같습니다.


마무리


크롬 개발자 도구 디바이스 모드
보다 편하네요


댓글을 달아 주세요



JetBrains IDE support  PHPStron , Webstorm 에서 크롬 디버깅 모드 사용 


최신버전 Storm 개발중 뜨는 안내 창
"JetBrains IDE support" 확장 프로그램을 소개합니다.
크롬의 console 기능을 스톰에서 사용할 수 있게 해주는 기능입니다. 

▼해당 링크를 클릭하면 



▼혹은 아래 URL을 접속하면은 해당 크롬 확장 프로그램을 설치 할 수 있습니다.



▼Storm에서 마우스 오른쪽 버튼을 눌러 해당 Debug 모드를 누르면 


▼혹은 크롬에서 해당 버튼을 누르면 


▼크롬창에서는 해당과 같은 메세지가 뜹니다.



▼바로 이 콘솔창에 있는 기능들을  



▼Storm에서 사용할수 있습니다. 브라우저와 IDE를 이동하지 않고 한자리에서 쉽게 디버깅이 가능합니다.
스톰에서 아래처럼 콘솔로그를 기록해보았습니다. 


▼크롬에서 해당 메세지가 보이네요.
반대로 크롬에서 콘솔로그를 찍으면 스톰에서 보이겠죠.


▼그리고 소스 디버깅 모드를 사용하면 해당처럼 디버깅 시작점을
찍고 새로고침을 하면


▼해당처럼 크롬 디버그 모드가 시작되겠죠.


▼스톰에서도 해당 디버그 모드가 실행되면서 라인의 소스라인의 하일라이트가 그려집니다.
디버그로 한줄 한줄 읽어가면서 수정하기 편할거 같습니다.


▼반대로 스톰에서 해당 버튼을 통해 디버그 라인을 이동시킬 수 있습니다. 
해당 기능은 프론트 엔드 개발자에게 큰 도움이 될거라 생각이 듭니다.


▼그리고 변수에 담긴 데이터등 스톰에서도 그대로 디버그 정보들을 확인 가능합니다.






댓글을 달아 주세요



ASP 속도 체크하기


ASP에서 성능 테스트 할 수 있는 가장 기본적인 방법을 소개합니다.
바로 Timer() 를 이용해서 페이지 처음과 끝에 코드를 심고 얼마나
걸렸는지 하는 아주 원시적이지만 가장 기본적이고 효과적인 방법입니다.

▼아래 코드를 IIS에서 돌려 실행해봅시다.
1
2
3
4
5
6
7
8
9
10
11
12
<%
   dim strSql
    dbCon.Open Application("DBInfo")
    dbCon.BeginTrans     //트랜젝션 시작
    dbCon.Execute(strSql)
    if dbCon.Errors.Count = 0 then
        dbCon.CommitTrans          //오류없을 시엔 커밋
    else
        dbCon.RollbackTrans          // 오류일땐 롤백
    end if
    dbCon.Close
%>
cs



방법은 위에 말했듯이 Timer()를 시작에 재고
중간에 for문으로 3천만번 정도 포문을 돌렸다
그리고 마지막은 역시 현재 시간 체크 

▼ 대략 내 오래된 노트북에서는 1천만번이 1.3초 정도 걸린다. (구려)




마무리



이런식으로 뿐이 퍼포먼스 체크는 멋이 없다고요? 그게 ASP 매력입니다. 원시적이면서 기본에 충실한 언어입니다. 


댓글을 달아 주세요



크롬에서 PHP 디버깅 하기 

안녕하세요. 고코더입니다. 

자바스크립트에서 흔히 쓰는 console.log는 좋은 기능 입니다. 
브라우저에 있는 개발자 툴을 이용해 디버깅을 가능하게 하여서 
좀 더 빠르고 쉽게 개발을 가능하게 해줍니다. 

그런데 스크립트 언어에 자격으로 가능한 이 방식을 간단한 소스로
서버 언어에서 사용이 가능합니다. 방식은 아마 모든 언어가 해당 방식처럼 개발하면 사용이 가능합니다. 
우선 저는 PHP 버전을 만들어 봤습니다. 

말은 거창하지만 그냥 데이터를 받아 스크립트 언어에 담는 거 뿐입니다. 

▼ 소스는 아래와 같다. 자바스크립트 console.log로 데이터를 보내 확인 가능하게 하는 원리 입니다.

<?php
function Console_log($data){
    echo "<script>console.log( 'PHP_Console: " $data "' );</script>";
}

$testVal "테스트 데이터";
Console_log($testVal);
?>




▼생각보다 유용하고 쓸만하다.




추천 컨텐츠



console.log - 개발자도구 콘솔 창에 안보이게 하기

JetBrains - Storm 에서 크롬 디버깅 사용 / JetBrains IDE support

PHP - Deprecated 오류 란?

PHP - 오류 메세지 출력 / error_reporting

크롬 - 개발자 도구 다크테마(Dark theme)로 변경

사이트 -모바일 환경 홈페이지 반응성 테스트 / troy.labs.daum.net

크롬 - 인코딩 강제 설정 / 글자 깨짐 수정




마무리


크롬 디버깅 모드를 공부해보세요~


댓글을 달아 주세요