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)

Commits related to this issue

Most upvoted comments

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): cs-terminal-preferences-fix

Hope it helps.

Even simpler workaround: simply prefix your command with “LANG=en_US.UTF-8”

Hi! Have the same issue.

  • macOS sierra
  • electron 1.6.3
  • node 7.7.2
  • npm 4.1.2

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)

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 LANG value of de_DE.UTF-8, reported upstream at https://bugs.chromium.org/p/chromium/issues/detail?id=715313

Got 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 (an npm clone) reports an inconsistent version constraint on package ajv, which is actually a JSON validator…

$ yarn install
...
warning "ajv-keywords@2.0.1-beta.1" has incorrect peer dependency "ajv@>=5.0.3-beta.0".
...
$ yarn why acv-keywords
...
info This module exists because "webpack" depends on it.
...
$ yarn list ajv
...
├─ ajv@4.11.5
...
└─ electron-builder@15.5.1
│  └─ ajv@5.0.4-beta.0
...
$ yarn why ajv
...
info Has been hoisted to "ajv"
info Reasons this module exists
   - "webpack" depends on it
   - "electron#electron-download#nugget#request#har-validator" depends on it
...

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

  • OSX Sierra ( Windows working perfectly )
  • Since Electron Version 1.4.5 ( Still not working on 1.6.4 )

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 to United States solved 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.