플러터 프로젝트를 개발 모드로 작업하다보면 Flutter DevTools를 사용할 때가 많은데요.
그런데 기본적으로 VS Code 내부에서 새 탭이 생기고 절반의 넓이를 가져간 채로 Widget Inspector가 생성돼요.

저는 27인치 모니터에서 왼쪽 반을 브라우저, 오른쪽 반을 VS Code를 사용하고 있는 상황이라 새 탭이 뜨면 코드를 볼 수 있는 공간이 굉장히 좁아져서 매번 브라우저로 키게끔 제가 입력을 했어야 했어요.

그런데 .vscode/settings.json 파일을 통해 개발 모드가 시작되면서 브라우저로 켜지게끔 세팅을 할 수 있는 방법을 찾아서 이를 공유하려고 해요! 공식 문서에서 이 힌트를 찾고 싶으시다면 링크를 눌러주세요.

먼저 cmd + shift + p로 명령 팔렛트를 열어줄게요.
해당 프로젝트에만 영향을 주고 싶기 때문에 Open Workspace Settings(JSON)를 선택해줬어요.
그런 다음 json 형식으로 아래 코드를 넣어주세요.

{
	// 기존 설정들에서 추가해주세요
	"dart.openDevTools": "always",
	"dart.devToolsBrowser": "chrome",
	"dart.devToolsLocation": {
		"default": "external"
	 }
}

이 코드를 넣고 개발 모드를 시작하시면 크롬 브라우저에서 아래와 같은 결과를 보실 수 있으실 거예요.

The purpose of life is the life of purpose.

— Robin Sharma