3 | Livewire is detected on this page. 4 | Devtools inspection is not available because it's in 5 | production mode or explicitly disabled by the author. 6 |
7 | -------------------------------------------------------------------------------- /shells/chrome/popups/enabled.html: -------------------------------------------------------------------------------- 1 | 2 |3 | Livewire is detected on this page. 4 | Open DevTools and look for the Livewire panel. 5 |
6 | -------------------------------------------------------------------------------- /shells/chrome/popups/not-found.html: -------------------------------------------------------------------------------- 1 | 2 |3 | Livewire not detected 4 |
5 | -------------------------------------------------------------------------------- /shells/chrome/src/backend.js: -------------------------------------------------------------------------------- 1 | // this is injected to the app page when the panel is activated. 2 | 3 | import { initBackend } from 'src/backend' 4 | import Bridge from 'src/bridge' 5 | 6 | window.addEventListener('message', handshake) 7 | 8 | function handshake (e) { 9 | if (e.data.source === 'livewire-devtools-proxy' && e.data.payload === 'init') { 10 | window.removeEventListener('message', handshake) 11 | 12 | let listeners = [] 13 | const bridge = new Bridge({ 14 | listen (fn) { 15 | var listener = evt => { 16 | if (evt.data.source === 'livewire-devtools-proxy' && evt.data.payload) { 17 | fn(evt.data.payload) 18 | } 19 | } 20 | window.addEventListener('message', listener) 21 | listeners.push(listener) 22 | }, 23 | send (data) { 24 | window.postMessage({ 25 | source: 'livewire-devtools-backend', 26 | payload: data 27 | }, '*') 28 | } 29 | }) 30 | 31 | bridge.on('shutdown', () => { 32 | listeners.forEach(l => { 33 | window.removeEventListener('message', l) 34 | }) 35 | listeners = [] 36 | }) 37 | 38 | initBackend(bridge) 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /shells/chrome/src/background.js: -------------------------------------------------------------------------------- 1 | // the background script runs all the time and serves as a central message 2 | // hub for each vue devtools (panel + proxy + backend) instance. 3 | 4 | const ports = {} 5 | 6 | chrome.runtime.onConnect.addListener(port => { 7 | let tab 8 | let name 9 | if (isNumeric(port.name)) { 10 | tab = port.name 11 | name = 'devtools' 12 | installProxy(+port.name) 13 | } else { 14 | tab = port.sender.tab.id 15 | name = 'backend' 16 | } 17 | 18 | if (!ports[tab]) { 19 | ports[tab] = { 20 | devtools: null, 21 | backend: null 22 | } 23 | } 24 | ports[tab][name] = port 25 | 26 | if (ports[tab].devtools && ports[tab].backend) { 27 | doublePipe(tab, ports[tab].devtools, ports[tab].backend) 28 | } 29 | }) 30 | 31 | function isNumeric (str) { 32 | return +str + '' === str 33 | } 34 | 35 | function installProxy (tabId) { 36 | chrome.tabs.executeScript(tabId, { 37 | file: '/build/proxy.js' 38 | }, function (res) { 39 | if (!res) { 40 | ports[tabId].devtools.postMessage('proxy-fail') 41 | } else { 42 | console.log('injected proxy to tab ' + tabId) 43 | } 44 | }) 45 | } 46 | 47 | function doublePipe (id, one, two) { 48 | one.onMessage.addListener(lOne) 49 | function lOne (message) { 50 | if (message.event === 'log') { 51 | return console.log('tab ' + id, message.payload) 52 | } 53 | console.log('devtools -> backend', message) 54 | two.postMessage(message) 55 | } 56 | two.onMessage.addListener(lTwo) 57 | function lTwo (message) { 58 | if (message.event === 'log') { 59 | return console.log('tab ' + id, message.payload) 60 | } 61 | console.log('backend -> devtools', message) 62 | one.postMessage(message) 63 | } 64 | function shutdown () { 65 | console.log('tab ' + id + ' disconnected.') 66 | one.onMessage.removeListener(lOne) 67 | two.onMessage.removeListener(lTwo) 68 | one.disconnect() 69 | two.disconnect() 70 | ports[id] = null 71 | } 72 | one.onDisconnect.addListener(shutdown) 73 | two.onDisconnect.addListener(shutdown) 74 | console.log('tab ' + id + ' connected.') 75 | } 76 | 77 | chrome.runtime.onMessage.addListener((req, sender) => { 78 | if (sender.tab && req.livewireDetected) { 79 | chrome.browserAction.setIcon({ 80 | tabId: sender.tab.id, 81 | path: { 82 | 16: `icons/16.png`, 83 | 48: `icons/48.png`, 84 | 128: `icons/128.png` 85 | } 86 | }) 87 | chrome.browserAction.setPopup({ 88 | tabId: sender.tab.id, 89 | popup: req.devToolsEnabled ? `popups/enabled.html` : `popups/disabled.html` 90 | }) 91 | } 92 | }) 93 | 94 | // Right-click inspect context menu entry 95 | let activeTabId 96 | chrome.tabs.onActivated.addListener(({ tabId }) => { 97 | activeTabId = tabId 98 | }) 99 | -------------------------------------------------------------------------------- /shells/chrome/src/detector.js: -------------------------------------------------------------------------------- 1 | import { installToast } from 'src/backend/toast' 2 | import { isFirefox } from 'src/devtools/env' 3 | 4 | window.addEventListener('message', e => { 5 | if (e.source === window && e.data.livewireDetected) { 6 | chrome.runtime.sendMessage(e.data) 7 | } 8 | }) 9 | 10 | function detect (win) { 11 | setTimeout(() => { 12 | if (!win.Livewire) { 13 | return; 14 | } 15 | win.postMessage({ 16 | livewireDetected: true, 17 | devToolsEnabled: win.Livewire.devToolsEnabled || false 18 | }, '*') 19 | 20 | win.__LIVEWIRE_DEVTOOLS_GLOBAL_HOOK__.emit('init', win.Livewire); 21 | }, 100) 22 | } 23 | 24 | // inject the hook 25 | if (document instanceof HTMLDocument) { 26 | installScript(detect) 27 | installScript(installToast) 28 | } 29 | 30 | function installScript (fn) { 31 | const source = ';(' + fn.toString() + ')(window)' 32 | 33 | if (isFirefox) { 34 | // eslint-disable-next-line no-eval 35 | window.eval(source) // in Firefox, this evaluates on the content window 36 | } else { 37 | const script = document.createElement('script') 38 | script.textContent = source 39 | document.documentElement.appendChild(script) 40 | script.parentNode.removeChild(script) 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /shells/chrome/src/devtools-background.js: -------------------------------------------------------------------------------- 1 | // This is the devtools script, which is called when the user opens the 2 | // Chrome devtool on a page. We check to see if we global hook has detected 3 | // Vue presence on the page. If yes, create the Vue panel; otherwise poll 4 | // for 10 seconds. 5 | 6 | let panelLoaded = false 7 | let panelShown = false 8 | let pendingAction 9 | let created = false 10 | let checkCount = 0 11 | 12 | chrome.devtools.network.onNavigated.addListener(createPanelIfHasLivewire) 13 | const checkLivewireInterval = setInterval(createPanelIfHasLivewire, 1000) 14 | createPanelIfHasLivewire() 15 | 16 | function createPanelIfHasLivewire () { 17 | if (created || checkCount++ > 10) { 18 | return 19 | } 20 | panelLoaded = false 21 | panelShown = false 22 | chrome.devtools.inspectedWindow.eval( 23 | '!!(window.__LIVEWIRE_DEVTOOLS_GLOBAL_HOOK__.Livewire)', 24 | function (hasLivewire) { 25 | if (!hasLivewire || created) { 26 | return 27 | } 28 | clearInterval(checkLivewireInterval) 29 | created = true 30 | chrome.devtools.panels.create( 31 | 'Livewire', 'icons/128.png', 'devtools.html', 32 | panel => { 33 | // panel loaded 34 | panel.onShown.addListener(onPanelShown) 35 | panel.onHidden.addListener(onPanelHidden) 36 | } 37 | ) 38 | } 39 | ) 40 | } 41 | 42 | // Runtime messages 43 | 44 | chrome.runtime.onMessage.addListener(request => { 45 | if (request === 'vue-panel-load') { 46 | onPanelLoad() 47 | } else if (request.vueToast) { 48 | toast(request.vueToast.message, request.vueToast.type) 49 | } else if (request.vueContextMenu) { 50 | onContextMenu(request.vueContextMenu) 51 | } 52 | }) 53 | 54 | // Page context menu entry 55 | 56 | function onContextMenu ({ id }) { 57 | if (id === 'inspect-instance') { 58 | const src = `window.__LIVEWIRE_DEVTOOLS_GLOBAL_HOOK__` 59 | 60 | chrome.devtools.inspectedWindow.eval(src, function (res, err) { 61 | if (err) { 62 | console.log(err) 63 | } 64 | if (typeof res !== 'undefined' && res) { 65 | panelAction(() => { 66 | chrome.runtime.sendMessage('get-context-menu-target') 67 | }, 'Open Livewire devtools to see component details') 68 | } else { 69 | pendingAction = null 70 | toast('No Livewire component was found', 'warn') 71 | } 72 | }) 73 | } 74 | } 75 | 76 | // Action that may execute immediatly 77 | // or later when the Vue panel is ready 78 | 79 | function panelAction (cb, message = null) { 80 | if (created && panelLoaded && panelShown) { 81 | cb() 82 | } else { 83 | pendingAction = cb 84 | message && toast(message) 85 | } 86 | } 87 | 88 | function executePendingAction () { 89 | pendingAction && pendingAction() 90 | pendingAction = null 91 | } 92 | 93 | // Execute pending action when Vue panel is ready 94 | 95 | function onPanelLoad () { 96 | executePendingAction() 97 | panelLoaded = true 98 | } 99 | 100 | // Manage panel visibility 101 | 102 | function onPanelShown () { 103 | chrome.runtime.sendMessage('vue-panel-shown') 104 | panelShown = true 105 | panelLoaded && executePendingAction() 106 | } 107 | 108 | function onPanelHidden () { 109 | chrome.runtime.sendMessage('vue-panel-hidden') 110 | panelShown = false 111 | } 112 | 113 | // Toasts 114 | 115 | function toast (message, type = 'normal') { 116 | const src = `(function() { 117 | __LIVEWIRE_DEVTOOLS_TOAST__(\`${message}\`, '${type}'); 118 | })()` 119 | 120 | chrome.devtools.inspectedWindow.eval(src, function (res, err) { 121 | if (err) { 122 | console.log(err) 123 | } 124 | }) 125 | } 126 | -------------------------------------------------------------------------------- /shells/chrome/src/devtools.js: -------------------------------------------------------------------------------- 1 | // this script is called when the VueDevtools panel is activated. 2 | 3 | import { initDevTools } from 'src/devtools' 4 | import Bridge from 'src/bridge' 5 | 6 | initDevTools({ 7 | 8 | /** 9 | * Inject backend, connect to background, and send back the bridge. 10 | * 11 | * @param {Function} cb 12 | */ 13 | 14 | connect (cb) { 15 | // 1. inject backend code into page 16 | injectScript(chrome.runtime.getURL('build/backend.js'), () => { 17 | // 2. connect to background to setup proxy 18 | const port = chrome.runtime.connect({ 19 | name: '' + chrome.devtools.inspectedWindow.tabId 20 | }) 21 | let disconnected = false 22 | port.onDisconnect.addListener(() => { 23 | disconnected = true 24 | }) 25 | 26 | const bridge = new Bridge({ 27 | listen (fn) { 28 | port.onMessage.addListener(fn) 29 | }, 30 | send (data) { 31 | if (!disconnected) { 32 | port.postMessage(data) 33 | } 34 | } 35 | }) 36 | // 3. send a proxy API to the panel 37 | cb(bridge) 38 | }) 39 | }, 40 | 41 | /** 42 | * Register a function to reload the devtools app. 43 | * 44 | * @param {Function} reloadFn 45 | */ 46 | 47 | onReload (reloadFn) { 48 | chrome.devtools.network.onNavigated.addListener(reloadFn) 49 | } 50 | }) 51 | 52 | /** 53 | * Inject a globally evaluated script, in the same context with the actual 54 | * user app. 55 | * 56 | * @param {String} scriptName 57 | * @param {Function} cb 58 | */ 59 | 60 | function injectScript (scriptName, cb) { 61 | const src = ` 62 | (function() { 63 | var script = document.constructor.prototype.createElement.call(document, 'script'); 64 | script.src = "${scriptName}"; 65 | document.documentElement.appendChild(script); 66 | script.parentNode.removeChild(script); 67 | })() 68 | ` 69 | chrome.devtools.inspectedWindow.eval(src, function (res, err) { 70 | if (err) { 71 | console.log(err) 72 | } 73 | cb() 74 | }) 75 | } 76 | -------------------------------------------------------------------------------- /shells/chrome/src/hook.js: -------------------------------------------------------------------------------- 1 | // This script is injected into every page. 2 | import { installHook } from 'src/backend/hook' 3 | import { isFirefox } from 'src/devtools/env' 4 | 5 | // inject the hook 6 | if (document instanceof HTMLDocument) { 7 | const source = ';(' + installHook.toString() + ')(window)' 8 | 9 | if (isFirefox) { 10 | // eslint-disable-next-line no-eval 11 | window.eval(source) // in Firefox, this evaluates on the content window 12 | } else { 13 | const script = document.createElement('script') 14 | script.textContent = source 15 | document.documentElement.appendChild(script) 16 | script.parentNode.removeChild(script) 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /shells/chrome/src/proxy.js: -------------------------------------------------------------------------------- 1 | // This is a content-script that is injected only when the devtools are 2 | // activated. Because it is not injected using eval, it has full privilege 3 | // to the chrome runtime API. It serves as a proxy between the injected 4 | // backend and the Vue devtools panel. 5 | 6 | const port = chrome.runtime.connect({ 7 | name: 'content-script' 8 | }) 9 | 10 | port.onMessage.addListener(sendMessageToBackend) 11 | window.addEventListener('message', sendMessageToDevtools) 12 | port.onDisconnect.addListener(handleDisconnect) 13 | 14 | sendMessageToBackend('init') 15 | 16 | function sendMessageToBackend (payload) { 17 | window.postMessage({ 18 | source: 'livewire-devtools-proxy', 19 | payload: payload 20 | }, '*') 21 | } 22 | 23 | function sendMessageToDevtools (e) { 24 | if (e.data && e.data.source === 'livewire-devtools-backend') { 25 | port.postMessage(e.data.payload) 26 | } 27 | } 28 | 29 | function handleDisconnect () { 30 | window.removeEventListener('message', sendMessageToDevtools) 31 | sendMessageToBackend('shutdown') 32 | } 33 | -------------------------------------------------------------------------------- /shells/chrome/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const createConfig = require('../createConfig') 3 | 4 | module.exports = createConfig({ 5 | entry: { 6 | hook: './src/hook.js', 7 | devtools: './src/devtools.js', 8 | background: './src/background.js', 9 | 'devtools-background': './src/devtools-background.js', 10 | backend: './src/backend.js', 11 | proxy: './src/proxy.js', 12 | detector: './src/detector.js' 13 | }, 14 | output: { 15 | path: path.join(__dirname, 'build'), 16 | filename: '[name].js' 17 | }, 18 | devtool: process.env.NODE_ENV !== 'production' 19 | ? '#inline-source-map' 20 | : false 21 | }) 22 | -------------------------------------------------------------------------------- /shells/createConfig.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const webpack = require('webpack') 3 | const merge = require('webpack-merge') 4 | const { VueLoaderPlugin } = require('vue-loader') 5 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') 6 | 7 | module.exports = (config, target = { chrome: 52, firefox: 48 }) => { 8 | const bubleOptions = { 9 | target, 10 | objectAssign: 'Object.assign', 11 | transforms: { 12 | forOf: false, 13 | modules: false 14 | } 15 | } 16 | 17 | const baseConfig = { 18 | resolve: { 19 | alias: { 20 | src: path.resolve(__dirname, '../src'), 21 | views: path.resolve(__dirname, '../src/devtools/views'), 22 | components: path.resolve(__dirname, '../src/devtools/components') 23 | } 24 | }, 25 | module: { 26 | rules: [ 27 | { 28 | test: /\.js$/, 29 | loader: 'buble-loader', 30 | exclude: /node_modules|vue\/dist|vuex\/dist/, 31 | options: bubleOptions 32 | }, 33 | { 34 | test: /\.vue$/, 35 | loader: 'vue-loader', 36 | options: { 37 | compilerOptions: { 38 | preserveWhitespace: false 39 | }, 40 | transpileOptions: bubleOptions 41 | } 42 | }, 43 | { 44 | test: /\.css$/, 45 | use: [ 46 | 'vue-style-loader', 47 | 'css-loader' 48 | ] 49 | }, 50 | { 51 | test: /\.styl(us)?$/, 52 | use: [ 53 | 'vue-style-loader', 54 | 'css-loader', 55 | 'stylus-loader' 56 | ] 57 | }, 58 | { 59 | test: /\.(png|woff2)$/, 60 | loader: 'url-loader?limit=0' 61 | } 62 | ] 63 | }, 64 | performance: { 65 | hints: false 66 | }, 67 | plugins: [ 68 | new VueLoaderPlugin(), 69 | ...(process.env.VUE_DEVTOOL_TEST ? [] : [new FriendlyErrorsPlugin()]), 70 | new webpack.DefinePlugin({ 71 | 'process.env.RELEASE_CHANNEL': JSON.stringify(process.env.RELEASE_CHANNEL || 'stable') 72 | }) 73 | ], 74 | devServer: { 75 | port: process.env.PORT 76 | } 77 | } 78 | 79 | if (process.env.NODE_ENV === 'production') { 80 | const UglifyPlugin = require('uglifyjs-webpack-plugin') 81 | baseConfig.plugins.push( 82 | new webpack.DefinePlugin({ 83 | 'process.env.NODE_ENV': '"production"' 84 | }), 85 | new UglifyPlugin() 86 | ) 87 | } 88 | 89 | return merge(baseConfig, config) 90 | } 91 | -------------------------------------------------------------------------------- /shells/dev/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |{{ count }}
4 | 5 | 6 | 7 |Your counter is {{ $store.getters.isPositive ? 'positive' : 'negative' }}
8 |Date: {{ date.toString() }} - Hours: {{ hours }} - Prototype: {{ date | prototypeString }}
4 | 5 |6 | 7 |
8 | 9 |14 | 15 | 16 |
17 | 18 |{{ setDisplay() }}
20 |
21 | {{ mapDisplay() }}
23 |
24 | 25 | 26 | 27 | 28 |
29 |{{ $route.params.id }}
5 |