beyondcode / beyondcode/livewire-devtools

How to install livewire-devtools under Chrome?

Abierto
#10 0 comentarios 0 reacciones 0 asignados Ver en GitHub
Lenguaje dominante
JavaScript
Estrellas
421
Forks
27
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

Hello,
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 loaded and installed package from https://github.com/beyondcode/livewire-devtools
and selected it 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.

Looking at branch https://github.com/beyondcode/livewire-devtools/issues/6
I found some hints how it can be fixed:
1) In file package.json I added
```
"devDependencies": {
"eslint": "^7.9.0"
},

```
eslint line and run
```
npm install
npm run watch-poll

```with success

2) 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

```

What can be the issue and how to fix it ?

Thanks!

Guía de contribución

No hay ninguna guía de contribución indexada para este repositorio

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.