Editor/vscode

[vscode] vscode 내에서 html 파일 웹 브라우저에 열리게 하는 단축키

bskyvision.com 2020. 10. 15. 17:03

오늘은 vscode 편집기에서 html 문서를 작성하다가, 바로 웹브라우저를 실행시킬 수 있는 방법에 대해 다루겠습니다. 

 

open in browser 확장 플러그인

ctrl + shift + x로 마켓플레이스를 연 후 open in browser를 검색해서 TechER에서 만든 확장프로그램을 설치해줍니다. 

 

 

저는 이미 설치해서 설치 버튼이 없는데, 아직 설치를 안하신 분은 녹색의 설치 버튼이 있을 것입니다. 설치하셨다면, 이제 alt + b의 단축키를 사용하면, html 문서에서 바로 디폴트 설정되어 있는 웹브라우저를 열 수가 있습니다. 저의 경우에는 크롬이 열리는데요, 만약 디폴트 설정되어 있는 웹브라우저 말고 다른 웹브라우저를 열고 싶다면, alt + shift + b를 이용하면 여러 종류의 브라우저 중에 선택할 수 있는 화면이 나옵니다. 

 

alt+shift+b 단축키 사용시

 

이 중에서 원하는 웹브라우저를 선택하면, 해당 브라우저에서 html 파일이 열립니다. 웹 개발을 할 때 여러 웹브라우저에서 모두 잘 작동하는지 확인할 필요가 있기 때문에 유용한 기능입니다. 참고로 해당 PC에 설치되어 있는 브라우저만 열립니다. 설치되어 있지 않은 브라우저를 선택하면, 다음과 같이 경고 메시지가 출력됩니다.

 

 

배운 내용 정리

오늘 소개해드린 것을 마지막으로 정리하겠습니다. 

 

1. open in browser 확장프로그램 설치.

2-1. alt+b: 디폴트 설정되어 있는 웹브라우저에서 html 파일 열림.

2-2. alt+shift+b: 여러 웹브라우저 중에서 선택된 웹브라우저에서 html 파일 열림.