[vscode] liveserver 실행 시 개발자 도구 활성화하기

이번 포스트에서는 liveserver를 실행할 때 개발자 도구를 활성화 시킨 상태에서 실행하는 방법을 알아보자! 시간 절약!

 

liveserver 실행 시 개발자 도구 활성화 하기

 

 

귀차니즘

liveserver란 vscode의 extension으로 간단히 html을 테스트 해볼 수 있는 서버이다.

문제(사실은 귀차니즘)는 요즘 html에서 동작하는 javascript를 많이 작성하는데 실행시킬 때마다 계속 개발자 도구를 켜야한다는 점이었다.

 

한참 개발중인데 자동으로 개발자 도구를 실행시킬 수는 없을까? 

 

 

Chromium 실행 flag

다행히 chromium 계열의 브라우저(chrome 부터 edge, brave 등)에는 실행 시 다양한 옵션을 flag로 전달할 수 있다.

https://peter.sh/experiments/chromium-command-line-switches/

List of Chromium Command Line Switches « Peter Beverloo

그 중에 --auto-open-devtools-for-tabs 옵션을 이용하면 자동으로 devtool을 실행해준다!!!

 

 

vscode에 실행 옵션 저장

vscode의 live server config에 살펴보면 브라우저 실행 시 cmd line 옵션을 줄 수 있는 부분이 있다.

여기서 Edit in settings.json을 클릭하고 아래와 같이 편집해주자.

  "liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --auto-open-devtools-for-tabs",

일생동안 한 10000번의 손가락 노동을 줄일 수 있을 것 같다.