Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!
Debugging Html
Hi Experts, I find difficult tracing errors on codes to locate which part of the codes having error. By the way, I came from vb6 programmer and I am a newly learner of Html, JavaScript and ASP. In Vb6 we use F8 to run step by step on codes by that we can trace immediately the error code. Is there any equivalent of F8 to Html? Do i need to install debugger on my pc for Html? I am using Firefox browser right now. Any advice or guide is greatly appreciated. Thank you!
Do more with
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
For web browser debugging, we usually use the Inspect Element feature that the web browser built-in.
for ASP, you can write a response to front end for debugging.
for Javascript, you can write to console.log for debugging.
it seems that Visual Studio can't debug on ASP pages in an efficient way ?
for ASP, you can write a response to front end for debugging.
for Javascript, you can write to console.log for debugging.
it seems that Visual Studio can't debug on ASP pages in an efficient way ?
Hi Whing. I show you some tools that I used to debug my code.Let's say that you have the following HTML code:
The browsers have a very powerful optionl the develeper tools.If you open you will see (I 'll show in Chrome) something like that:
At the element section you can have a view of html document-structure of your file as it seems above.To debug the js code I am going at the console section that give me any errors that have my js code with a red color messages. So in my example when i run the code I have this:
The error logo says me about the nature of error, at which line is happened and something other information.If I click at the right of the console section it direct me at to "SOURCES" section and i can have a red line that shows me when exist the error.
.
The other method that I'm using is to embed the "debugger" statement inside the code:In my example I am writing the above js code like that:
When I run the code the debugger of the browser run the code and stops at the "debugger" position. If you put your cursor at every executing line you will get information in a pop up window like that:
<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->
<p class="lw">Hello Weaver!</p>
<!-- End your code here -->
</body>
</html>
<script>
(function(){
var parElem=document.getElementsByTagName('p');
parElem.style.colora='red';
})();
</script>
The browsers have a very powerful optionl the develeper tools.If you open you will see (I 'll show in Chrome) something like that:
At the element section you can have a view of html document-structure of your file as it seems above.To debug the js code I am going at the console section that give me any errors that have my js code with a red color messages. So in my example when i run the code I have this:
The error logo says me about the nature of error, at which line is happened and something other information.If I click at the right of the console section it direct me at to "SOURCES" section and i can have a red line that shows me when exist the error.
.The other method that I'm using is to embed the "debugger" statement inside the code:In my example I am writing the above js code like that:
(function(){
var parElem=document.getElementsByTagName('p');
debugger;
parElem.style.colora='red';
})();
When I run the code the debugger of the browser run the code and stops at the "debugger" position. If you put your cursor at every executing line you will get information in a pop up window like that:
Hello experts, I supposedly looking a step by step debugging formula like F8 in vb6 to let me see the flow of the codes or the sequence running on the code. But should I say that there's no such thing like that in Html? If there's none then what are the alternatives aside from "Inspect Element" suggested by Ryan. Thank you!
Try CSE HTML Validator https://www.htmlvalidator.com/
The free version will pick up many of your errors but not all. (They want you to buy the full version).
The free version will pick up many of your errors but not all. (They want you to buy the full version).
You can't debug HTML - it is not a programming language - it is a markup language - it describes a document.
You can potentially debug the script that creates the HTML or you can debug JavaScript that runs on the page but there is no such thing as debugging HTML
If HTML does not look the way you want it you do as described above.
Run it through a validator to make sure your markup is valid - this is the first step. If your markup is not valid you see why and go back to the source (ASP code) to see why you are not producing valid HTML and fix it.
Once your code is valid and the page does not look correct then you use your Developer Tools (F12 or right click and inspect element).
Having said all that - what sort of things are you trying to debug?
You can potentially debug the script that creates the HTML or you can debug JavaScript that runs on the page but there is no such thing as debugging HTML
If HTML does not look the way you want it you do as described above.
Run it through a validator to make sure your markup is valid - this is the first step. If your markup is not valid you see why and go back to the source (ASP code) to see why you are not producing valid HTML and fix it.
Once your code is valid and the page does not look correct then you use your Developer Tools (F12 or right click and inspect element).
Having said all that - what sort of things are you trying to debug?
Premium Content
You need an Expert Office subscription to comment.Start Free Trial