프로덕션 모드에서 Vue.js devtools를 강제로 활성화합니다.

TLDR 업데이트:
~처럼
주석에 언급된 내용 - 이제 여기에서 설명한 내용을 자동화하는 데 사용할 수 있는 크롬 확장 프로그램 "Vue force dev"이 있습니다.

때때로 우리는 프로덕션에서 무언가를 디버깅해야 합니다. 그러나 Vue.js가 devtools가 비활성화된 상태로 배포되면 다음 메시지가 표시됩니다.

이제 개발 환경에서 버그를 재현할 수 없는 경우 디버깅하는 것이 PITA입니다.

그러나 "JavaScript일 뿐"이므로 쉽게 "메인프레임을 해킹"할 수 있습니다. 우리가 해야 할 일은 Vue가 로드된 위치를 찾고 하나의 옵션을 덮어쓰는 것입니다.

Vue.config.devtools = true

대부분의 번들러는 라이센스 목적으로 소스 파일의 주석을 남기므로 특정 주석에 대한 모든 파일을 검색할 수 있습니다.

 * Vue.js v2.6.11
 * (c) 2014-2019 Evan You
 * Released under the MIT License.
 */

chrome devtools에서 모든 소스를 검색하려면 점을 클릭하고 search를 선택합니다.


정확한 버전을 복사할 필요 없이 "Vue.js"를 검색하기만 하면 대부분의 경우 올바른 줄을 얻을 수 있습니다. 다음과 유사해야 합니다.


이 행에 중단점을 설정하고 페이지를 다시 로드하십시오. 모두 축소되고 한 줄이면 "다음 함수 호출(F10/CMD ') 건너뛰기"를 사용하여 맨 끝으로 이동해야 합니다. 축소되지 않은 경우 전체 Vue 코드 블록 다음에 중단점을 설정해야 합니다.

이제 범위의 변수를 살펴봄으로써 Vue 객체를 찾아야 합니다. Webpack을 사용하면 Vue는 다음과 같이 내보내기 내부에 있어야 합니다.



우리의 경우 객체exports의 속성t이 Vue 객체임을 알 수 있습니다.

이제 콘솔로 이동하여 devtools 옵션을 true로 덮어씁니다.


중단점을 제거하고 런타임을 재개할 수 있습니다. 그게 다입니다! 개발자 도구를 닫았다가 다시 열면 사용 가능한 Vue 탭이 표시됩니다!

솔루션은 설정에 따라 다를 수 있습니다. 문제가 있는 경우 의견을 보내 주시면 게시물에 더 많은 정보를 추가할 수 있습니다.

❤️