Encode file path as URI + fix console display on Windows

Author: Akryum

src/devtools/views/components/ComponentInspector.vue

@@ -99,24 +99,29 @@ export default {
     },
     openInEditor () {
       const file = this.target.file
-      const src = `fetch('/__open-in-editor?file=${file}').then(response => {
-        if (response.ok) {
-          console.log('File ${file} opened in editor')
-        } else {
-          const msg = 'Opening component ${file} failed'
-          if (__VUE_DEVTOOLS_TOAST__) {
-            __VUE_DEVTOOLS_TOAST__(msg, 'error')
+      // Console display
+      const fileName = file.replace(/\\/g, '\\\\')
+      if (file) {
+        const src = `fetch('/__open-in-editor?file=${encodeURI(file)}').then(response => {
+          if (response.ok) {
+            console.log('File ${fileName} opened in editor')
           } else {
-            console.log('%c' + msg, 'color:red')
+            const msg = 'Opening component ${fileName} failed'
+            if (__VUE_DEVTOOLS_TOAST__) {
+              __VUE_DEVTOOLS_TOAST__(msg, 'error')
+            } else {
+              console.log('%c' + msg, 'color:red')
+            }
+            console.log('Check the setup of your project, see https://github.com/vuejs/vue-devtools/blob/master/docs/open-in-editor.md')
           }
           console.log('Check the setup of your project, see https://github.com/vuejs/vue-devtools/blob/master/docs/open-in-editor.md')
+        })`
+        if (this.$isChrome) {
+          chrome.devtools.inspectedWindow.eval(src)
+        } else {
+          // eslint-disable-next-line no-eval
+          eval(src)
         }
-      })`
-      if (this.$isChrome) {
-        chrome.devtools.inspectedWindow.eval(src)
-      } else {
-        // eslint-disable-next-line no-eval
-        eval(src)
       }
     }
   }
@@ -127,4 +132,3 @@ export default {
 .title
   white-space nowrap
 </style>
-