electron: DOM Element Highlighter stopped working
- Electron version: 1.6.2
- Operating system: OSX Sierra
- npm -v : 4.3.0
- node -v : 6.9.5
Expected behavior
Be able to select elements/DOM from the DevTools inside the electron app
Actual behavior
Unable to select elements from the DevTools extension
DevTools elements highlighter stopped working
-
i run
electron .in app root folder -
use the OS menu option to open DevTools
-
DevTools show up inside the app window
-
Click to go highlight some DOM element with the element picker
-
i receive this error in terminal (where i run
electron .)
[3932:0309/103839.903432:ERROR:CONSOLE(3203)] “Protocol Error: the message without method: {“error”:{“code”:-32700,“message”:“Message must be a valid JSON”}}”, source: chrome-devtools://devtools/bundled/inspector.js (3203) -
All the other DevTools features work perfectly.
How to reproduce
1 - Add this OS menu item https://github.com/720kb/ndm/blob/master/menu.js#L91 2 - Open the app and click it
If still unable to reproduce it, just clone https://github.com/720kb/ndm.git and run npm i && npm run mac on MacOS. Then just go to open DevTools by the app OS menu View -> developer -> open devtools.
Sorry for the issue but i really wasn’t able to figure out what’s happening, it could be some problem with the app code but i swear i have actually no ideas, any advice is appreciated!
Thanks
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Reactions: 12
- Comments: 37 (8 by maintainers)
Hi everyone,
I figured out another, possibly better workaround. I have the same problem on OS X (with Czech language and Czech Republic region) with Electron 1.6.5. Changing the locale to English fixes it.
But if you don’t want to change the system locale, you can do this: If you use Apple Terminal, in Preferences -> Profiles, on Advanced tab of your default profile, in International section (at the bottom), there is an option called Set locale environment variables on startup. Uncheck the option and restart the terminal.
Here is a screenshot of setting the option (in Czech locale):
Hope it helps.
Even simpler workaround: simply prefix your command with “LANG=en_US.UTF-8”
Hi! Have the same issue.
When I run
electron .in terminal and then I am trying to inspect some elements always receive error as below:[38951:0314/143735.852491:ERROR:CONSOLE(3203)] "Protocol Error: the message without method: {"error":{"code":-32700,"message":"Message must be a valid JSON"}}", source: chrome-devtools://devtools/bundled/inspector.js (3203)This has been fixed upstream via https://codereview.chromium.org/2843223005/
I noticed that if i switch my OSX system language from Italian to English the problem goes away. Maybe it’s a problem with non-english versions? I’m on OSX Sierra 10.12.4, Electron 1.6.2
This will be fixed in the next Electron release, 1.7.2
I could reproduce this in standalone chrome when using a
LANGvalue ofde_DE.UTF-8, reported upstream at https://bugs.chromium.org/p/chromium/issues/detail?id=715313Got exactly the same behaviour starting after electron 1.4.15.
Notice the element selection is blocked in DevTools because an error is raised about an incorrectly formatted JSON message somewhere. Although,
yarn(annpmclone) reports an inconsistent version constraint on packageajv, which is actually a JSON validator…I have the same Problem. Just updated electron again and noticed that its still not solved. So im happy to see the issue is tracked now. Can’t work without inspector running so i always switch back to previous electron version for developing and hope this will be fixed soon.
Same Issue on
After packaging the App, everything works perfectly.
I’m running version 1.7.6 (chrome 58.0.3029.110) and I’m still facing the same problem. Prefixing with LANG=en_US.UTF-8 like explained fix the problem but for me it’s only a workaround.
I’m running MacOs 10.11.6 with French install. The problem does not appear running the same application under Linux64/32 and Windows64.
Without the flag, angular material v1.x md-select can only be opened once and tooltips are only displayed once too. After some time (60seconds?) and the “Protocol Error: the message without method…” error message in console the md-select can be selected again.
Edit: I uploaded project to try to reproduce the problem on your side https://github.com/tangb/electron-angularmaterial
@MaThGo My system language was already on English, but Region was on
French - Canada. Switching it toUnited Statessolved the issue. The problem seems to be tied to your locale settings… Thanks!Same for me. With macOS Sierra in French it doesn’t work. If I switch to english it works fine !
I have the same problem on Mac OS X with electron 1.4.15 and electron 1.6.4 . Strange thing is that it just appeared one day without reason. I tried to update electron to latest version (1.6.4) but nothing changed. Maybe a Mac OS X update that changed something ?
Current Mac OS X version: 10.12.3 (don’t know which one it was last time I observed the devtools working correctly, my mac just autoupdates)
Yes it’s like you described. It’s working after i build it. But running from command line with v1.6.2 throws this error.