Comments (15)
moved to: https://github.com/Microsoft/vscode-chrome-debug/issues/555
from vscode-live-server.
Hi I'm not sure if I'm missing something but it still doesn't seem to work for me and I get that same message:
Cannot connect to runtime process, timeout after 10000 ms - (reason: Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:9222).
What I did was:
in setting.json:
"liveServer.settings.ChromeDebuggingAttachment": true
in launch.json:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "attach",
"name": "Attach to Chrome",
"port": 9222,
"webRoot": "${workspaceFolder}"
},
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:5500",
"webRoot": "${workspaceFolder}"
}
]
}
and In the "target" field of Chrome, appended --remote-debugging-port=9222
from vscode-live-server.
Are you talking about this => https://www.youtube.com/watch?v=pcjeJ7pVjKo
If yes, yes! it is possible!
check the settings page https://github.com/ritwickdey/vscode-live-server/blob/master/docs/settings.md
from vscode-live-server.
The video looks exactly what I want (I am away at a conference, and don't have access to my work computer, but I will try the liveServer.settings.ChromeDebuggingAttachment: true.
I assume that the launch.json should look something like this:
{
"name": "Attach to Chrome, with sourcemaps",
"type": "chrome",
"request": "attach",
"port": 9222,
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
}
from vscode-live-server.
Okay, First try to close all instance of Google Chrome & start live server. It will open a new window of Google chrome.
Now start chrome debugging attachment.
It should work,
from vscode-live-server.
Hi @DrYSG, Thanks for reporting! Just now I've tried, it's not working! May be some how code is broken! I've have to debug it.
A workaround : (you can you commands through AdvanceCustomBrowserCmdLine
settings) :
- Set the settings
{
"liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --remote-debugging-port=9222"
}
from vscode-live-server.
I must still be missing something. I first launched the live server, had the web page running inside of it, Then I tried to Attach to to Chrome.
I am getting this as the errror:
Cannot connect to runtime process, timeout after 10000 ms - (reason: Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:9222).
yes, I did shut down all instances of Chrome (V 62) on Windows 10.
and yes, this is what the url the Chrome browser is showing:
http://127.0.0.1:5500/dist/webview2.html
Launch.json
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "attach",
"name": "Attach to Chrome",
"port": 9222,
"webRoot": "${workspaceRoot}"
},
{
"type": "chrome",
"request": "launch",
"name": "WebView",
"url": "http://localhost/WebView/webview.html",
"webRoot": "${workspaceRoot}"
}
]
}
settings.json (under .vscode)
{
"liveServer.settings.ChromeDebuggingAttachment": true,
"liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --remote-debugging-port=9222"
}
from vscode-live-server.
remove the settings ChromeDebuggingAttachment
... It has a bug!
Close all chrome instance, stop live server, start the live server again...
from vscode-live-server.
Ok, I did that, and yes it is now stopping at the breakpoints. The odd thing now is that that I have a minified bundle.js, with sourcemaps (I use rollupjs). But inside of VSCODE, I see that I can set the breakpoints at the original source, but the locals are all from the minified version (e.g. the local variable sprite, is now "i". Is this a inherent limitation in VSCODE debugging, and in which case I should use Chrome Debugger?
from vscode-live-server.
Sorry! I don't get your point! Can you give me an example.?
If you have minified version of js & sourceMap, you can add breakpoints at original js file (not modified version).
from vscode-live-server.
See above screen shot. The breakpoint is at line #110, which is in the updateSprite(sprite) funnction,
I wanted to look the value of the passed in variable sprite. I have stepped the program to line #112, at this point the local variable loc should be defined.
But if you look at the left of the VSCODE debug window, in the pane called local variables, you see only
this, i and t as being the variables defined. They have the correct values for sprite and loc, but are named i and t,
This is because I am using rollupjs to take the source, and bundle it and then minifiy it (I like rollupjs better than webpack for this work).
The VSCODE debugger is smart enough to use the sourcemaps in bundle.js to show the correct line, but it does not do the local variables. Is this a inherent limit in VSCODE?
Because the Chrome native debugger (F12) does not do this, it shows the local variables with the real names.
from vscode-live-server.
Ohh! I got your point! if Chrome native debugger doesn't behave like this, you could be a bug. (I really don't know). Since it is not related of Live Server, I can't help you! Best way to open a new issue request here https://github.com/Microsoft/vscode-chrome-debug/issues.
BTW, one question! When you're hovering on a variable, it that working? and if you do launch
request of debugging (not attachment), is that working as expected?
from vscode-live-server.
That was two questions!
- Hovering does not show any variables (either an attach or direct launch)
- variable names are minified with a launch request also.
So it has nothing to do with live-server. I will submit a question to the vscode folks.
from vscode-live-server.
Don't close now, "liveServer.settings.ChromeDebuggingAttachment": true
=> this setting has a bug!
I'll check later (after 16th Dec)
from vscode-live-server.
This issue has been resolved with v3.0.1. Please update the extension and thanks for the reporting.
If you like the extension, please drop a review to vscode marketplace.
from vscode-live-server.
Related Issues (20)
- Vs Code Live server doesn't directly open the HTML file
- I getting live server access
- Live server not working on the preview screen HOT 1
- EXTENSION PROBLEM HOT 1
- Live Server cannot be displayed in Chrome
- Live Server cannot be displayed in Chrome HOT 1
- Instant Reload/Auto Reload
- Incorrectly defaults to higher port numbers HOT 1
- code -live server HOT 1
- Ritwick dey live server extension problem
- Image display error in Live Server Visual Studio Code
- Live Server not updating basic anchor tags accordingly.
- THIS IS A CRITICAL BUG! NEEDS IMMEDIATE ATTENTION! HOT 1
- liveserver not working
- Different tabs keep opening for a single content
- open
- how to disable auto refresh in live server
- live server is not working
- live server is not working proper HOT 1
- Live Server doesn't load my codespace HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vscode-live-server.