Merge pull request #642 from vuejs/v4.1.4

v4.1.4

Author: Akryum

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-devtools",
-  "version": "4.1.3",
+  "version": "4.1.4",
   "description": "devtools for Vue.js!",
   "main": "index.js",
   "scripts": {
@@ -32,7 +32,7 @@
   },
   "homepage": "https://github.com/vuejs/vue-devtools#readme",
   "devDependencies": {
-    "buble": "^0.18.0",
+    "buble": "^0.19.0",
     "buble-loader": "^0.4.1",
     "chromedriver": "^2.34.0",
     "cross-env": "^5.1.3",
@@ -46,12 +46,12 @@
     "nightwatch": "^0.9.19",
     "nightwatch-helpers": "^1.2.0",
     "raw-loader": "^0.5.1",
-    "selenium-server": "2.52.0",
+    "selenium-server": "2.53.1",
     "semver": "^5.4.1",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.1",
     "url-loader": "^0.6.2",
-    "vue-loader": "^13.6.1",
+    "vue-loader": "^14.2.1",
     "vue-template-compiler": "^2.5.13",
     "webpack": "^3.10.0",
     "webpack-dev-server": "^2.9.7"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Vue.js devtools",
-  "version": "4.1.3",
+  "version": "4.1.4",
   "description": "Chrome and Firefox DevTools extension for debugging Vue.js applications.",
   "manifest_version": 2,
   "icons": {

shells/chrome/manifest.json

@@ -44,6 +44,19 @@ function setToString (func, string) {
 
 const aWeirdFunction = setToString(function weird (a, b, c) {}, 'foo')
 
+function sum (a, b) {
+  return a + b
+}
+
+const handler = {
+  apply: function (target, thisArg, argumentsList) {
+    console.log(`Calculate sum: ${argumentsList}`)
+    return argumentsList[0] + argumentsList[1]
+  }
+}
+
+const proxy1 = new Proxy(sum, handler)
+
 export default {
   components: {
     TestComponent: {
@@ -79,7 +92,12 @@ export default {
       j: new Map([[1, 2], [3, 4], [5, new Map([[6, 7]])], [8, new Set([1, 2, 3, 4, new Set([5, 6, 7, 8]), new Map([[1, 2], [3, 4], [5, new Map([[6, 7]])]])])]]),
       html: '<b>Bold</b> <i>Italic</i>',
       htmlReg: /<b>hey<\/b>/i,
-      'html <b>key</b>': (h, t, m, l) => {}
+      'html <b>key</b>': (h, t, m, l) => {},
+      proxy1,
+      sym: Symbol('test'),
+      multiLineParameterFunction: function(a,
+                                  b,
+                                  c) {}
     }
   },
   computed: {

shells/dev/target/NativeTypes.vue

@@ -8,7 +8,8 @@ export default new Vuex.Store({
     count: 0,
     date: new Date(),
     set: new Set(),
-    map: new Map()
+    map: new Map(),
+    sym: Symbol('test')
   },
   mutations: {
     INCREMENT: state => state.count++,

shells/dev/target/store.js

@@ -163,7 +163,7 @@ function scan () {
         if (typeof instance.__VUE_DEVTOOLS_ROOT_UID__ === 'undefined') {
           instance.__VUE_DEVTOOLS_ROOT_UID__ = ++rootUID
         }
-        rootInstances.push(instance)
+        rootInstances.push(instance.$root)
       }
 
       return true

src/backend/index.js

@@ -44,6 +44,11 @@ export default {
       tooltip: '[[{{keys.ctrl}}]] + [[F]] Filter components by name'
     }
   },
+  ComponentInstance: {
+    consoleId: {
+      tooltip: 'Available as <mono>{{id}}</mono> in the console.'
+    }
+  },
   ComponentInspector: {
     openInEditor: {
       tooltip: 'Open <mono><<insert_drive_file>>{{file}}</mono> in editor'

src/devtools/locales/en.js

@@ -23,16 +23,29 @@
         </span>
         <span class="angle-bracket">&lt;</span><span class="item-name">{{ displayName }}</span><span class="angle-bracket">&gt;</span>
       </span>
-      <span class="info console" v-if="instance.consoleId === '$vm0'">
-        == {{ instance.consoleId }}
+      <span
+        v-if="instance.consoleId"
+        class="info console"
+        v-tooltip="$t('ComponentInstance.consoleId.tooltip', { id: instance.consoleId })"
+      >
+        = {{ instance.consoleId }}
       </span>
-      <span class="info router-view" v-if="instance.isRouterView">
+      <span
+        v-if="instance.isRouterView"
+        class="info router-view"
+      >
         router-view{{ instance.matchedRouteSegment ? ': ' + instance.matchedRouteSegment : null }}
       </span>
-      <span class="info fragment" v-if="instance.isFragment">
+      <span
+        v-if="instance.isFragment"
+        class="info fragment"
+      >
         fragment
       </span>
-      <span class="info inactive" v-if="instance.inactive">
+      <span
+        v-if="instance.inactive"
+        class="info inactive"
+      >
         inactive
       </span>
       <span class="spacer"></span>
@@ -187,7 +200,7 @@ export default {
   &.console
     color #fff
     background-color transparent
-    top 0px
+    top 0
   &.router-view
     background-color #ff8344
   &.fragment

src/devtools/views/components/ComponentInstance.vue

@@ -125,6 +125,8 @@ function replacer (key) {
     return NEGATIVE_INFINITY
   } else if (type === 'function') {
     return getCustomFunctionDetails(val)
+  } else if (type === 'symbol') {
+    return `[native Symbol ${Symbol.prototype.toString.call(val)}]`
   } else if (val !== null && type === 'object') {
     if (val instanceof Map) {
       return encodeCache.cache(val, () => getCustomMapDetails(val))
@@ -245,9 +247,15 @@ export function getCustomComponentDefinitionDetails (def) {
 }
 
 export function getCustomFunctionDetails (func) {
-  const string = Function.prototype.toString.call(func) || ''
-  const matches = string.match(/\(.*\)/)
-  const args = matches ? matches[0] : '(?)'
+  let string = ''
+  try {
+    string = Function.prototype.toString.call(func)
+  } catch (e) {
+    // Func is probably a Proxy, which can break Function.prototype.toString()
+  }
+  const matches = string.match(/\([\s\S]*?\)/)
+  // Trim any excess whitespace from the argument string
+  const args = matches ? `(${matches[0].substr(1, matches[0].length - 2).split(',').map(a => a.trim()).join(', ')})` : '(?)'
   return {
     _custom: {
       type: 'function',
@@ -263,6 +271,7 @@ export function parse (data, revive) {
 }
 
 const specialTypeRE = /^\[native (\w+) (.*)\]$/
+const symbolRE = /^\[native Symbol Symbol\((.*)\)\]$/
 
 function reviver (key, val) {
   if (val === UNDEFINED) {
@@ -281,6 +290,9 @@ function reviver (key, val) {
     } else if (val._custom.type === 'set') {
       return reviveSet(val)
     }
+  } else if (symbolRE.test(val)) {
+    const [, string] = symbolRE.exec(val)
+    return Symbol.for(string)
   } else if (specialTypeRE.test(val)) {
     const [, type, string] = specialTypeRE.exec(val)
     return new window[type](string)

src/util.js

@@ -5,7 +5,7 @@
 
   "selenium" : {
     "start_process" : true,
-    "server_path" : "node_modules/selenium-server/lib/runner/selenium-server-standalone-2.52.0.jar",
+    "server_path" : "node_modules/selenium-server/lib/runner/selenium-server-standalone-2.53.1.jar",
     "host" : "127.0.0.1",
     "port" : 4444,
     "cli_args" : {