Debugging HTML-CSS with VS code

HTML-CSS
#1

Hello everyone,

I’m having an issue with vs code editor. I did google it and tried many solutions but it’s not solved.

When I run an HTML file, it goes smoothly, once I add a CSS file, the editor shows error messages. I think it’s server-side problem, I installed an extension called “Live Server”.

Exception has occurred: ReferenceError: closeDescriptionPopup is not defined
at HTMLAnchorElement.eval (eval at B (chrome-error://chromewebdata/:2:404), <anonymous>:1:41)
at y (chrome-error://chromewebdata/:7147:2735)
at F.b (chrome-error://chromewebdata/:7155:108)
at F.g (chrome-error://chromewebdata/:7153:462)
at window.jstProcess (chrome-error://chromewebdata/:7156:847)
at chrome-error://chromewebdata/:7157:60

I found this same issue reported on Github as a Bug but they closed it and asked the poster to go to stack overflow.
I read on stack overflow the solution suggested and I tried it but it didn’t solve anything.

I’m using VS code on Windows 10

The thing is, once I hit F5, a file get created by VS code and asks me to add configuration, the file name is “launch.json” and this is the code inside it:

{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.

"version": "0.2.0",
"configurations": [
    {
        "type": "pwa-chrome",
        "request": "launch",
        "name": "Launch Chrome against localhost",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}"
    }
]

}

Some solutions suggest changing the localhost port from 8080 to 5500
I tried it but it didn’t fix the issue.
Also, the WebRoot to change it and I did that too without fixing the issue at all.

Part of the solution suggested in stack-overflow post was to use the terminal and type:
install npm
start npm

I read it needs Node.JS to be installed, I looked and I don’t have Node.JS installed, I tried to install but the setup file doesn’t launch every time I click it, nothing happens.

Thank you all in advance.
Let me know if any further details are required or needed.

#2

You don’t need to use the VS Code run button with Live Server. You just click the “Go Live” button at the bottom or right-click the HTML file and use the menu option “Open with Live Server”. There is also a maintained fork of Live Server called Five Server you can check out (works better for some people).

1 Like
#3

Thank you for your reply.
I appreciate you taking the time to read my post.

Before reading your comment, I did read an article recommending installing the “Live Sass Compiler” extension, which installs the “Live Server” along with it.

After that, I tried clicking “Go Live” and it worked, the web browser “Chrome” used localhost port 5500 and it worked.

VS code shown a notification “Live Server Extension delayed to perform and prevented other processes” then it showed another notification about CPU overload and a button to report it to the developer “Ritwickdey”.

This can be a workaround or a temporary solution, cause it’s not fixing the root cause and I still can’t do F5 or run with debugging.

#4

You do not use the debugger to run HTML/CSS. You can’t debug HTML and CSS. The debugger is meant for coding languages like JS where you set breakpoints and step through the code execution. But I never really used the VS Code debugger, if I want to debug some code I just add a debugger statement in the code and do it in the browser. In-IDE debugging is just for convenience.

For normal static site development with a bit of JS code, the Live Server extension is perfect. As for any performance issue with Live Server, I’d check out the fork I gave a link to.

#5

Then how to run or execute the file?
In VS Code, I run the file with F5 and it does run with debugging

I used an IDE for Python and the process was smooth.

For the performance issue, the developer of the “Live Server” has a built-in method to get in contact on a forum or chat room he made for CPU overload issues and I saw he was reviewing each case, replying and sometimes he announces an update that fixes the issue.
Honestly, this developer is a great guy “Ritwickdey”.

Would yu please elaborate on the last part “I’d check out the fork I gave a link to” ???

#6

TL;DR You don’t use the F5 functionality to run web pages you use it to run and debug programming languages. For web pages, you use a server.

I wouldn’t count on it. There hasn’t been any development done on that extension in over two years and if you look at the extensions GitHub issues you will see hundreds of automated reports about the same things.

The Five Server fork I was talking about is an updated version of the extension that is being actively developed. Just use it instead.

Long answer.

As said, for frontend code HTML/CSS/JS you need a server. The F5 command is meant for debugging pure code, like JS, NodeJS, Python, C, Java, etc. It is not meant to be used for serving web pages.

Also, an IDE (editor) does not run code, it is just a fancy text editor. The IDE may have ways to compile and execute code built-in for convenience but it is not the IDE that is running the code. It just has ways to execute commands to external programs that do that.

Running Python code is not the same as running a web page. A web page does not need to be compiled or run through a standalone interpreter, it just needs to be served and the runtime is just the browser. This is why you need a server. You can run HTML pages directly in the browser by just opening them, but that is not the right way to do it, you want to use a web server.

1 Like
#7

Thank you so much for your detailed answer

I’m new to the Front End development. I used to do C++ and Java; used to do the F5 to run, debug and execute. When I got the VS Code, I saw the “run” tab so I did use it.

Last year, I did some Python and used an IDE and I do get your point, the IDE doesn’t run the code, that’s why we install python. I used PyCharm IDE, it was helpful and smooth.

1 Like
#8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.