Vue-devtools-v5.1.0

yzsunlei · Dec 15, 2019 · df1da4d · df1da4d
1 parent 140a87e
commit df1da4d
Show file tree

Hide file tree

Showing 164 changed files with 18,057 additions and 0 deletions.
diff --git a/6.Vue-devtools/shells/chrome/devtools-background.html b/6.Vue-devtools/shells/chrome/devtools-background.html
@@ -0,0 +1,2 @@
+<meta charset="utf-8">
+<script src="./build/devtools-background.js"></script>
diff --git a/6.Vue-devtools/shells/chrome/devtools.html b/6.Vue-devtools/shells/chrome/devtools.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+    <style>
+      html, body {
+        height: 100%;
+      }
+      #container {
+        display: flex;
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+      <div id="app"></div>
+    </div>
+    <script src="./build/devtools.js"></script>
+  </body>
+</html>
diff --git a/6.Vue-devtools/shells/chrome/icons/128-beta.png b/6.Vue-devtools/shells/chrome/icons/128-beta.png
diff --git a/6.Vue-devtools/shells/chrome/icons/128-gray.png b/6.Vue-devtools/shells/chrome/icons/128-gray.png
diff --git a/6.Vue-devtools/shells/chrome/icons/128.nuxt.png b/6.Vue-devtools/shells/chrome/icons/128.nuxt.png
diff --git a/6.Vue-devtools/shells/chrome/icons/128.png b/6.Vue-devtools/shells/chrome/icons/128.png
diff --git a/6.Vue-devtools/shells/chrome/icons/16-beta.png b/6.Vue-devtools/shells/chrome/icons/16-beta.png
diff --git a/6.Vue-devtools/shells/chrome/icons/16-gray.png b/6.Vue-devtools/shells/chrome/icons/16-gray.png
diff --git a/6.Vue-devtools/shells/chrome/icons/16.nuxt.png b/6.Vue-devtools/shells/chrome/icons/16.nuxt.png
diff --git a/6.Vue-devtools/shells/chrome/icons/16.png b/6.Vue-devtools/shells/chrome/icons/16.png
diff --git a/6.Vue-devtools/shells/chrome/icons/48-beta.png b/6.Vue-devtools/shells/chrome/icons/48-beta.png
diff --git a/6.Vue-devtools/shells/chrome/icons/48-gray.png b/6.Vue-devtools/shells/chrome/icons/48-gray.png
diff --git a/6.Vue-devtools/shells/chrome/icons/48.nuxt.png b/6.Vue-devtools/shells/chrome/icons/48.nuxt.png
diff --git a/6.Vue-devtools/shells/chrome/icons/48.png b/6.Vue-devtools/shells/chrome/icons/48.png
diff --git a/6.Vue-devtools/shells/chrome/manifest.json b/6.Vue-devtools/shells/chrome/manifest.json
@@ -0,0 +1,59 @@
+{
+  "name": "Vue.js devtools",
+  "version": "5.1.0",
+  "version_name": "5.1.0",
+  "description": "Chrome and Firefox DevTools extension for debugging Vue.js applications.",
+  "manifest_version": 2,
+  "icons": {
+    "16": "icons/16.png",
+    "48": "icons/48.png",
+    "128": "icons/128.png"
+  },
+  "browser_action": {
+    "default_icon": {
+      "16": "icons/16-gray.png",
+      "48": "icons/48-gray.png",
+      "128": "icons/128-gray.png"
+    },
+    "default_title": "Vue Devtools",
+    "default_popup": "popups/not-found.html"
+  },
+  "web_accessible_resources": [
+    "devtools.html",
+    "devtools-background.html",
+    "build/backend.js"
+  ],
+  "devtools_page": "devtools-background.html",
+  "background": {
+    "scripts": [
+      "build/background.js"
+    ],
+    "persistent": false
+  },
+  "permissions": [
+    "http://*/*",
+    "https://*/*",
+    "file:///*",
+    "contextMenus"
+  ],
+  "content_scripts": [
+    {
+      "matches": [
+        "<all_urls>"
+      ],
+      "js": [
+        "build/hook.js"
+      ],
+      "run_at": "document_start"
+    },
+    {
+      "matches": [
+        "<all_urls>"
+      ],
+      "js": [
+        "build/detector.js"
+      ],
+      "run_at": "document_idle"
+    }
+  ]
+}
diff --git a/6.Vue-devtools/shells/chrome/popups/disabled.html b/6.Vue-devtools/shells/chrome/popups/disabled.html
@@ -0,0 +1,6 @@
+<meta charset="utf-8">
+<p style="width: 200px">
+  Vue.js is detected on this page.
+  Devtools inspection is not available because it's in
+  production mode or explicitly disabled by the author.
+</p>
diff --git a/6.Vue-devtools/shells/chrome/popups/disabled.nuxt.html b/6.Vue-devtools/shells/chrome/popups/disabled.nuxt.html
@@ -0,0 +1,6 @@
+<meta charset="utf-8">
+<p style="width: 200px">
+  Nuxt.js + Vue.js is detected on this page.
+  Devtools inspection is not available because it's in
+  production mode or explicitly disabled by the author.
+</p>
diff --git a/6.Vue-devtools/shells/chrome/popups/enabled.html b/6.Vue-devtools/shells/chrome/popups/enabled.html
@@ -0,0 +1,5 @@
+<meta charset="utf-8">
+<p style="width: 180px;">
+  Vue.js is detected on this page.
+  Open DevTools and look for the Vue panel.
+</p>
diff --git a/6.Vue-devtools/shells/chrome/popups/enabled.nuxt.html b/6.Vue-devtools/shells/chrome/popups/enabled.nuxt.html
@@ -0,0 +1,5 @@
+<meta charset="utf-8">
+<p style="width: 180px;">
+  Nuxt.js + Vue.js is detected on this page.
+  Open DevTools and look for the Vue panel.
+</p>
diff --git a/6.Vue-devtools/shells/chrome/popups/not-found.html b/6.Vue-devtools/shells/chrome/popups/not-found.html
@@ -0,0 +1,4 @@
+<meta charset="utf-8">
+<p style="white-space: nowrap">
+  Vue.js not detected
+</p>
diff --git a/6.Vue-devtools/shells/chrome/src/backend.js b/6.Vue-devtools/shells/chrome/src/backend.js
@@ -0,0 +1,40 @@
+// this is injected to the app page when the panel is activated.
+
+import { initBackend } from 'src/backend'
+import Bridge from 'src/bridge'
+
+window.addEventListener('message', handshake)
+
+function handshake (e) {
+  if (e.data.source === 'vue-devtools-proxy' && e.data.payload === 'init') {
+    window.removeEventListener('message', handshake)
+
+    let listeners = []
+    const bridge = new Bridge({
+      listen (fn) {
+        var listener = evt => {
+          if (evt.data.source === 'vue-devtools-proxy' && evt.data.payload) {
+            fn(evt.data.payload)
+          }
+        }
+        window.addEventListener('message', listener)
+        listeners.push(listener)
+      },
+      send (data) {
+        window.postMessage({
+          source: 'vue-devtools-backend',
+          payload: data
+        }, '*')
+      }
+    })
+
+    bridge.on('shutdown', () => {
+      listeners.forEach(l => {
+        window.removeEventListener('message', l)
+      })
+      listeners = []
+    })
+
+    initBackend(bridge)
+  }
+}
diff --git a/6.Vue-devtools/shells/chrome/src/background.js b/6.Vue-devtools/shells/chrome/src/background.js
@@ -0,0 +1,123 @@
+// the background script runs all the time and serves as a central message
+// hub for each vue devtools (panel + proxy + backend) instance.
+
+const ports = {}
+
+chrome.runtime.onConnect.addListener(port => {
+  let tab
+  let name
+  if (isNumeric(port.name)) {
+    tab = port.name
+    name = 'devtools'
+    installProxy(+port.name)
+  } else {
+    tab = port.sender.tab.id
+    name = 'backend'
+  }
+
+  if (!ports[tab]) {
+    ports[tab] = {
+      devtools: null,
+      backend: null
+    }
+  }
+  ports[tab][name] = port
+
+  if (ports[tab].devtools && ports[tab].backend) {
+    doublePipe(tab, ports[tab].devtools, ports[tab].backend)
+  }
+})
+
+function isNumeric (str) {
+  return +str + '' === str
+}
+
+function installProxy (tabId) {
+  chrome.tabs.executeScript(tabId, {
+    file: '/build/proxy.js'
+  }, function (res) {
+    if (!res) {
+      ports[tabId].devtools.postMessage('proxy-fail')
+    } else {
+      console.log('injected proxy to tab ' + tabId)
+    }
+  })
+}
+
+function doublePipe (id, one, two) {
+  one.onMessage.addListener(lOne)
+  function lOne (message) {
+    if (message.event === 'log') {
+      return console.log('tab ' + id, message.payload)
+    }
+    console.log('devtools -> backend', message)
+    two.postMessage(message)
+  }
+  two.onMessage.addListener(lTwo)
+  function lTwo (message) {
+    if (message.event === 'log') {
+      return console.log('tab ' + id, message.payload)
+    }
+    console.log('backend -> devtools', message)
+    one.postMessage(message)
+  }
+  function shutdown () {
+    console.log('tab ' + id + ' disconnected.')
+    one.onMessage.removeListener(lOne)
+    two.onMessage.removeListener(lTwo)
+    one.disconnect()
+    two.disconnect()
+    ports[id] = null
+    updateContextMenuItem()
+  }
+  one.onDisconnect.addListener(shutdown)
+  two.onDisconnect.addListener(shutdown)
+  console.log('tab ' + id + ' connected.')
+  updateContextMenuItem()
+}
+
+chrome.runtime.onMessage.addListener((req, sender) => {
+  if (sender.tab && req.vueDetected) {
+    const suffix = req.nuxtDetected ? '.nuxt' : ''
+
+    chrome.browserAction.setIcon({
+      tabId: sender.tab.id,
+      path: {
+        16: `icons/16${suffix}.png`,
+        48: `icons/48${suffix}.png`,
+        128: `icons/128${suffix}.png`
+      }
+    })
+    chrome.browserAction.setPopup({
+      tabId: sender.tab.id,
+      popup: req.devtoolsEnabled ? `popups/enabled${suffix}.html` : `popups/disabled${suffix}.html`
+    })
+  }
+})
+
+// Right-click inspect context menu entry
+let activeTabId
+chrome.tabs.onActivated.addListener(({ tabId }) => {
+  activeTabId = tabId
+  updateContextMenuItem()
+})
+
+function updateContextMenuItem () {
+  chrome.contextMenus.removeAll(() => {
+    if (ports[activeTabId]) {
+      chrome.contextMenus.create({
+        id: 'vue-inspect-instance',
+        title: 'Inspect Vue component',
+        contexts: ['all']
+      })
+    }
+  })
+}
+
+chrome.contextMenus.onClicked.addListener((info, tab) => {
+  chrome.runtime.sendMessage({
+    vueContextMenu: {
+      id: info.menuItemId
+    }
+  })
+})
diff --git a/6.Vue-devtools/shells/chrome/src/detector.js b/6.Vue-devtools/shells/chrome/src/detector.js
@@ -0,0 +1,71 @@
+import { installToast } from 'src/backend/toast'
+import { isFirefox } from 'src/devtools/env'
+
+window.addEventListener('message', e => {
+  if (e.source === window && e.data.vueDetected) {
+    chrome.runtime.sendMessage(e.data)
+  }
+})
+
+function detect (win) {
+  setTimeout(() => {
+    // Method 1: Check Nuxt.js
+    const nuxtDetected = Boolean(window.__NUXT__ || window.$nuxt)
+
+    if (nuxtDetected) {
+      let Vue
+
+      if (window.$nuxt) {
+        Vue = window.$nuxt.$root.constructor
+      }
+
+      win.postMessage({
+        devtoolsEnabled: Vue && Vue.config.devtools,
+        vueDetected: true,
+        nuxtDetected: true
+      }, '*')
+
+      return
+    }
+
+    // Method 2: Scan all elements inside document
+    const all = document.querySelectorAll('*')
+    let el
+    for (let i = 0; i < all.length; i++) {
+      if (all[i].__vue__) {
+        el = all[i]
+        break
+      }
+    }
+    if (el) {
+      let Vue = Object.getPrototypeOf(el.__vue__).constructor
+      while (Vue.super) {
+        Vue = Vue.super
+      }
+      win.postMessage({
+        devtoolsEnabled: Vue.config.devtools,
+        vueDetected: true
+      }, '*')
+    }
+  }, 100)
+}
+
+// inject the hook
+if (document instanceof HTMLDocument) {
+  installScript(detect)
+  installScript(installToast)
+}
+
+function installScript (fn) {
+  const source = ';(' + fn.toString() + ')(window)'
+
+  if (isFirefox) {
+    // eslint-disable-next-line no-eval
+    window.eval(source) // in Firefox, this evaluates on the content window
+  } else {
+    const script = document.createElement('script')
+    script.textContent = source
+    document.documentElement.appendChild(script)
+    script.parentNode.removeChild(script)
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<meta charset="utf-8">
		<script src="./build/devtools-background.js"></script>