I just started developing my first Chrome extension.
Tutorials describe the process like this:
put code in a folder
load it into Chrome using Settings | Extensions
run it & use Chrome devtools to set breakpoints.
However, this seems like an extremely tedious process. I use WebStorm and would much rather start the debugging session from there and also set breakpoints in WebStorm.
I am sure there must be an option and developers do not manually load the extension in chrome after every change.
Related
I've developed a chrome extension and I would like to e2e test it in a pipeline. So I install Cypress. But then I saw the following code example
// NOTE: extensions cannot be loaded in headless Chrome
It states that it is not possible to load an extension in headless mode. Why is this the case, I assume that there is a good reason for this.
SOURCE
Is is possible to debug a wasm module through node?
I am using vscode and compiling with emcc -g4 --source-map-base. Putting a breakpoint in the C source file is ineffective. Trying to debug with node inspector node --inspect through Chrome doesn't allow me to use breakpoints either, although it is possible to debug wasm modules from regular web pages in Chrome.
I am using nodejs v10.13.
WebAssembly Source Maps is supported by both Firefox Developer Edition (in screenshot) and Chrome 71.
What you forgot is, to include a path to the source map. For example:
emcc -g4 --source-map-base http://localhost:8000/
Every source files path is prefixed with http://localhost:8000/ with this option. So replace this with your source directory.
So, I managed to get something working. I installed:
Node v11.4
Chrome beta 71 (because of this)
And launched the node process with node --inspect, for attaching the Chrome DevTools.
Moreover, in my code, instead of doing WebAssembly.instantiate in one shot (supplying directly the bitcode), I do it in two steps: WebAssembly.compile first, and then WebAssembly.instantiate. As soon as compile gets executed, there are some "wasm" sources being made available in the DevTools. This is the WebAssembly in wast text form, in which breakpoints can be set before it gets executed by instantiate.
But you can't debug from the original C-source files, Chrome DevTools only shows the decompiled wast yet. This feels like the stone age of debugging, but it is still possible to debug.
Edit 2020: This article https://developers.google.com/web/updates/2019/12/webassembly seems to indicate you should now be able to debug in devtools, from the original C source files. I did not try it, though.
I have a Node app that basically does some work and exits. This happens really fast, maybe in a second, so when I do
node --inspect app.js
I don't have enough time to open Chrome and set the breakpoint in order to stop the script.
Is there some other way to debug the script, e.g. somehow pre-set the breakpoint or make it stop immediately on the first line?
Have you had a look at the NodeJs debugger?
Node Debug
To use it, start Node.js with the inspect argument followed by the path to the script to debug.
eg.
$ node inspect myscript.js
Have a look at the breakpoint section in particular:-
Node Debugger Breakpoints
You can include:-
setBreakpoint(line)
to set breakpoints on specific lines.
You can find all the popular node.js debugging apps available in the link below :
https://nodejs.org/en/docs/inspector/
Using node-inspect, you can set a breakpoint on current line or specific line using :
setBreakPoint()
There are many other options of setBreakpoint() depending on your requirement which you can find in the documentation Here
Alternatively, I'd suggest using VSCode which has inbuilt debugger with which you can place a breakpoint in the editor itself. You can debug your node.js app in your IDE instead of opening a chrome web inspector or putting debug logs in the code and it is very simple to configure the app. Just create a launch configuration based on how you launch your node.js app and run it.
Node.js debugging with VSCode is clearly explained in their docs Here
You can do the same with WebStorm too but you need a paid license to use the WebStorm compared to VSCode which OpenSource.
Try to use the following
node --inspect-brk app.js
it will start the process with an active breakpoint at the very beginning of the program.
This question is pretty short and self explanatory. I'm wondering how I can run my Chrome extension in NW.js.
I know you can run an app in NW.js and I think you can run extensions as well?
I can't find much on the topic. Back in 2013 the way to do it seemed to be:
nw [path to manifest.json] --load-extension
Any ideas are appreciated!
Yes you can.
First off, download the extension you want. For this example I'll be using this debugging tool, which adds an additional tab in the dev tools window.
Inside your NW.js package.json file, ensure you have an entry called chromium-args.
Ensure its value contains --enable-extensions --load-extension=relative_path_to_extension_manifest.
My package.json looks like this:
After restarting the application, the extension shows up as expected:
Something I'll add is that the full Chrome API might not be available to you. I couldn't find info about what NW.js supports, but Electron definitely does not support the entire API, so this might have similar restrictions.
I also noticed you mention in the comments that you need to assign a hotkey of sorts. I'd need to know what you were trying to do, but essentially you have the option of either using a browser mechanism such as addEventListener('keydown', myHandler) or using the NW.js API depending on your exact needs.
Typically, I use node inspector (https://github.com/node-inspector/node-inspector) to debug node.js. Can this be used to attach to a remote node.js instance running in the JVM via J2V8?
Also, it looks like the dev version of node.js supports native Chrome debugging: https://github.com/nodejs/node/pull/6792. If J2V8 adopts this version of node.js, will I be able to simply attach the Chrome debugger directly to the JVM?
If the question is still relevant - I have created j2v8-debugger library.
It allows debugging J2V8 using Chrome DevTools.
Basic features like setting/removing breakpoints, step into, step out and step over, variables inspection, etc. are implemented.
It uses Stetho lib for communication with Chrome DevTools.
Also it's uses DebugHandler for accessing V8 debug information.
If you need need to debug J2V8, which runs on non-Android JVM you would need to use another lib for communication to Chrome DevTools, but likely you could re-use all the logic from this project as it's basically POJO/JSON, which are send over web socket.
Hope it could be helpful.