I've been working my way through the node.js Electron tutorial:
Electron Tutorial
I'm OK until I arrive at the section "Optional: Debugging from VS Code". I added the .vscode/launch.json file as suggested. I then select "Run and Debug" from the sidebar as suggested. What I get is a dialog that pops up stating:
"Cannot connect to the target at localhost:9222: ..."
I assumed this was because localhost:9222 wasn't opened in Chrome, and so I entered "chrome://inspect" in a Chrome tab and re-ran "Run and Debug" but got the same response.
Does anyone know what the correct procedure to follow is to debug this tutorial in VSCode?
Thanks.
Related
I created an Office Add-In using the Yeoman generator, I chose the React add-in and I was able to make it run properly within VS Code by following this tutorial:
https://learn.microsoft.com/en-us/office/dev/add-ins/tutorials/excel-tutorial
The react boilerplate includes a piece of code which logs an action to the console, but I see no console anywhere. According to the documentation, since my version of Office is 2016 volume licensed, I'm running Internet Explorer, and since my Windows system is 8.1, I can't use the F12 tools nor the Microsoft Office Add-In Debugger, so how do I view these logs like I do when I develop web applications for other browsers like Chrome and Firefox?
I followed the instructions in this guide by microsoft:
https://learn.microsoft.com/en-us/office/dev/add-ins/testing/debug-add-ins-using-f12-tools-ie
Now, for what I understood, the only option I'm left with is to "Switch to the Internet Explorer 11 webview". So I ran the command npx office-addin-dev-settings webview manifest.xml ie in the terminal and it returned "The web view type is set to Microsoft Internet Explorer". Then when I go ahead and type npm start, the add-in loads correctly but I still can't see any dev tools.
I did try something else by going to the Run and Debug tab in VS Code, choosing the option "Excel Desktop (Edge-Legacy)", running the command npx office-addin-dev-settings webview manifest.xml edge-legacy, modifying the launch.json file so it didn't complain but I saw no difference.
I was able to have bridge chrome and edge devtools using the IEDiagnosticsAdapter, but nothing appears in the console, so I think it's unsupported.
As title says, I'm trying to debug my my React app.
"Run Debug Application" and "Debug Debug Application". Both open up a Chrome window, and it displays the 404.
I am running Manjaro Linux.
This has been troublesome. Please accept my apologies; I don't know my way around PhpStorm, so let me know if I've left any information out.
EDIT: I checked the network ports and saw that PhpStorm was already listening on 3000 before I even clicked debug. I cannot run npm start for the same reason now.
Killing the process and restarting PhpStorm did nothing, the ports are still being listened on.
Thanking you for your time
EDIT: Changing the port number to which the debugger listens had no effect.
EDIT: Included commands used to start application.
I am trying to set up the Divio app on Win10 Pro.
I can launch the application, log in, select the workspace folder for my project, so the required dependencies should be fine.
However when I click on "Set up my project", then a new window is opened with a text "Preparing logs...", and an animated "hour-glass" appears next to the "Open Shell" button in the lower-left corner, but that's it. Everything hangs up at this point, and I can't figure out what's wrong. Restarted the computer and the app several times, but with same results.
Any ideas how to work out what is going wrong?
The Divio app is an Electron application, and uses Chromium for the interface.
You can invoke its Inspector as you would in Chrome itself, using command-option-i on Macintosh and control-shift-i on Linux and Windows.
The Inspector's Console tab will show any errors, and this will help understand what is happening internally. Typically, they will be errors related to the operating system in some way.
I built a simple app using electron, electron-forge, and Vue.
When I run my app via "electron-forge start" it works great.
When i try and compile my app with "electron-forge make" it compiles, but the app itself does not complete the back end scripts, some promise or return is not resolving.
I've determined the problem is not on the front end (vue) but something going on with node.
I've been able to get SOME debugging by setting up manual break points in the code and sending it to "mainWindow.webContents.send" and leaving the dev console on in chromium.
However, this is really taking shots in the dark. Is there any way to display the node console from a compiled electron app? this would make debugging 1000 times easier, but I can't seem to find a solution, all references are about the chromium debug console, which is not useful here.
If you are using windows machine select the "exe" file and drag it to command prompt, then press enter.
If you are using MAC machine right click ".app" file select "Show Package Contents". Open MacOs folder inside the Contents folder, then drag the executable file and put it on terminal.
Basically put the executable on terminal and run the application you can see nodeJs console messages in it.
I am using Visual Studio Code for a javascript project. You can set breakpoints and step through and debug very easily the code that runs in nodejs. Is there any way to allow breakpoints and debugging for the client side, browser running code?
Debugging via console.log gets old real quick.
For debugging in Chrome there is the Visual Studio Code: Debugger for Chrome extension. You can find this extension in the marketplace, search for debugger as told in the debugging manual. Unfortunately there is (currently) no support for other browsers,
Debugging node.js works out of the box, see the debugging manual above or John Papa's blog post.
Debugging both client and server (as Phil commented) is not possible at least in my opinion since you need to have two different launch configurations, sorry.
You should use developer tools which all modern browses have (F12).
I prefer chrome because with workspaces and you can inline edit your code in browser.
By opening you project in chorme Browser and using chrome DevTools.
You can debug it whatever you want.
steps:
Open your project (with url).
Open DevTools (F12)
Choose the "Elements" and choose the Element
You can see "Event Listeners" on the right panel , Select what you needed
And then, You can right click the event you, Select "Show function defination"
Enjoy yourself !
If you means Debug Nodejs ,As I known there's A npm package named "debuger"?
Another technique is to use the Visual Studio Code: Debugger for Chrome extension. Save the contents of your launch.json config for node.js and delete it. Then create the Chrome launch.json. Combine the two and you can debug either the server or the client in Code (but not both at the same time).
To debug the client, the server must be running, so from a command prompt use the "node" command that starts the server. In Code launch the Chrome debugger and debug the client side.