How to install livewire-devtools under Chrome? - laravel-livewire

Question

In the console of my Livewire/livewire 2 / laravel 7 app I got error :
login?email=admin%40mail.com&password=111111:60 Uncaught TypeError: window.livewire.devTools is not a function
at login?email=admin%40mail.com&password=111111:60
(anonymous) # login?email=admin%40mail.com&password=111111:60
livewire-turbolinks.js:31 Uncaught TypeError: Livewire.hook is not a function
I found this https://reposhub.com/javascript/misc/beyondcode-livewire-devtools.html page and tried to follow it
I uploaded and unpacked chrome.zip, which contains
serge#AtHome:~/chrome$ ls -la
total 48
drwxrwxr-x 5 serge serge 4096 Nov 24 18:23 .
drwxr-xr-x 40 serge serge 4096 Nov 24 18:22 ..
drwxrwxr-x 2 serge serge 4096 Aug 30 23:47 build
-rw-r--r-- 1 serge serge 78 Aug 30 23:36 devtools-background.html
-rw-r--r-- 1 serge serge 383 Aug 30 22:09 devtools.html
-rw-r--r-- 1 serge serge 6148 Sep 1 10:28 .DS_Store
drwxrwxr-x 2 serge serge 4096 Sep 1 15:08 icons
-rw-r--r-- 1 serge serge 1175 Sep 3 23:34 manifest.json
-rw-rw-r-- 1 serge serge 27 Nov 24 18:23 package-lock.json
drwxrwxr-x 2 serge serge 4096 Aug 30 23:36 popups
-rw-r--r-- 1 serge serge 162 Sep 1 18:10 .web-extension-id
But trying to install it I got errors:
serge#AtHome:~/chrome$ npm install
npm WARN saveError ENOENT: no such file or directory, open '/home/serge/chrome/package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open '/home/serge/chrome/package.json'
npm WARN chrome No description
npm WARN chrome No repository field.
npm WARN chrome No README data
npm WARN chrome No license field.
up to date in 0.523s
found 0 vulnerabilities
serge#AtHome:~/chrome$ npm run build
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path /home/serge/chrome/package.json
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, open '/home/serge/chrome/package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
npm ERR! A complete log of this run can be found in:
npm ERR! /home/serge/.npm/_logs/2020-11-24T16_23_38_605Z-debug.log
I do not see file package.json, but have file package-lock.json, which contains :
{
"lockfileVersion": 1
}
What have I to do to install it under my Google Chrome Version 85.0.4183.121 (Official Build) (64-bit) ?
MODIFIED BLOCK :
I loaded and installed package from https://github.com/beyondcode/livewire-devtools
and selected in under chrome://extensions/
but I see erros buttons red: https://prnt.sc/vqgk51
and clicking on it I see error:
Error in event handler: ReferenceError: suffix is not defined
Context
_generated_background_page.html
Stack Trace
build/background.js:1 (anonymous function)
!function(e){var n={};function o(t){if(n[t])return n[t].exports;var s=n[t]={i:t,l:!1,exports:{}};return e[t].call(s.exports,s,s.exports,o),s.l=!0,s.exports}o.m=e,o.c=n,o.d=function(e,n,t){o.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:t})},o.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(n,"a",n),n},o.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},o.p="",o(o.s=659)}({659:function(e,n){const o={};let t;chrome.runtime.onConnect.addListener(e=>{let n,t;!function(e){return+e+""===e}(e.name)?(n=e.sender.tab.id,t="backend"):(n=e.name,t="devtools",function(e){chrome.tabs.executeScript(e,{file:"/build/proxy.js"},function(n){n?console.log("injected proxy to tab "+e):o[e].devtools.postMessage("proxy-fail")})}(+e.name)),o[n]||(o[n]={devtools:null,backend:null}),o[n][t]=e,o[n].devtools&&o[n].backend&&function(e,n,t){function s(n){if("log"===n.event)return console.log("tab "+e,n.payload);console.log("devtools -> backend",n),t.postMessage(n)}function c(o){if("log"===o.event)return console.log("tab "+e,o.payload);console.log("backend -> devtools",o),n.postMessage(o)}function r(){console.log("tab "+e+" disconnected."),n.onMessage.removeListener(s),t.onMessage.removeListener(c),n.disconnect(),t.disconnect(),o[e]=null}n.onMessage.addListener(s),t.onMessage.addListener(c),n.onDisconnect.addListener(r),t.onDisconnect.addListener(r),console.log("tab "+e+" connected.")}(n,o[n].devtools,o[n].backend)}),chrome.runtime.onMessage.addListener((e,n)=>{n.tab&&e.livewireDetected&&(chrome.browserAction.setIcon({tabId:n.tab.id,path:{16:"icons/1.png",48:"icons/48.png",128:"icons/128.png"}}),chrome.browserAction.setPopup({tabId:n.tab.id,popup:e.devtoolsEnabled?`popups/enabled${suffix}.html`:`popups/disabled${suffix}.html`}))}),chrome.tabs.onActivated.addListener(({tabId:e})=>{t=e}),chrome.contextMenus.onClicked.addListener((e,n)=>{chrome.runtime.sendMessage({vueContextMenu:{id:e.menuItemId}})})}});
I reopened Chrome and reloaded Kubutu.
What can be the issue and how to fix it ?
MODIFIED:
Looking at branch https://github.com/beyondcode/livewire-devtools/issues/6
I found some hints how it can be fixed:
In file package.json I added
"devDependencies": {
"eslint": "^7.9.0"
},
eslint line and run
npm install
npm run watch-poll
with success
In my project I found 3 files :
/vendor/livewire/livewire/dist/manifest.json
/public/mix-manifest.json
/public/vendor/livewire/manifest.json
but all these 3 files are autogenerated I do not know which file have I to edit as I read :
{
...
"permissions": [
"http://*/*",
"https://*/*",
+ "contextMenus"
],
...
}
contextMenus is missed in manifest.json
?
Thanks!