vscode 에서 크롬 콘솔창(edge콘솔창) 같이 보는 방법은?
안녕하세요. 궁금증연구소입니다.
오늘 포스팅 주제는 "vscode에서 크롬 콘솔 창 같이 보는 방법은?"입니다.
요즘 코딩을 배우는 분들이 많습니다. 사람들이 주로 처음에 배우는 언어는 파이썬이나 자바스크립트 같은 스크립트 언어인데요, 코딩 문법이 굉장히 직관적이고 상대적으로 쉽기 때문에 많이 배웁니다.
저도 자바스크립트를 최근에 독학하고 있는데요, 자바스크립트를 하다 보면, 크롬 브라우저를 많이 사용합니다.
html로 만든 홈페이지를 vscode의 live server 기능을 이용해 크롬 브라우저로 띄어두고, f12를 눌러 개발자 도구로 콘솔 창 등을 활용하거나, 자바스크립트의 결과를 확인합니다.
문제는 vscode로 코드를 입력하는 부분과 코드의 결과를 보는 부분이 따로 되어 있어서 왔다 갔다 하는 게 너무 불편합니다.
그래서 방법이 없을까 하고 찾아보다가, 굉장히 쌈박한 vscode extension을 발견하여 공유드립니다.
보통 vscode에서 코딩을 화면 위와 같이 html , 자바스크립트, css 파일을 두고 코딩을 한 후,
live-server 등을 활용하여 위와 같이 크롬 브라우저와 개발자 도구를 별도의 화면으로 두고 확인하는 작업을 번갈아 가며 코딩을 진행하게 됩니다. 이 화면을 합쳐보겠습니다.
vscode는 마이크로소프트에서 만든 프로그램이라 마이스로 소프트 edge를 당연히 자사의 vscode에서 사용하기 편하게 만들어 두었습니다. 문제는 edge가 구글의 크롬을 참조하여 만들었기 때문에 개발자 도구를 보거나, 화면을 참조하는데 차이가 없다는 점입니다. 따라서 vscode의 edgetool을 활용합니다.
vscode의 익스텐션 검색에 Microsoft Edge Tools for VS Code라는 것을 설치해 줍니다. 설치하면 왼쪽 하단에 edge의 아이콘이 생기는 것을 볼 수 있습니다.
이 버튼을 클릭한후 lauch Project를 눌러줍니다.
edge의 개발자 도구이지만 크롬의 개발자 도구와 차이가 없기 때문에, 바로바로 결과를 확인하면서 작업기 가능합니다.
물론, 위치를 바꾸는 것도 가능하고, 에지 화면을 왼쪽의 코딩 파일 탭 중 하나로 삽입하는 것도 가능합니다.
물론 필요에 따라서 콘솔 창을 크게 쓰는 것도 방법입니다. 저는 자바스크립트를 주로 다루기 때문에, 요렇게 콘솔로 바로바로 확인할 수 있게 세팅해두면 너무 편하더라고요.
위의 빨간 부분을 누르면 브라우저를 바로 볼 수도 있습니다.
