Debugging Html

Whing Dela Cruz
Whing Dela Cruz used Ask the Experts™
on
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!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Ryan ChongSoftware Team Lead
Commented:
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 ?

Author

Commented:
Thank you for your Idea Ryan. I will try it now!
Distinguished Expert 2017
Commented:
Hi Whing. I show you some tools that I used to debug my code.Let's say that you have the following HTML code:
<!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>

Open in new window

And you want to run this script js code:
 <script>
(function(){
var parElem=document.getElementsByTagName('p');
parElem.style.colora='red';

})();
  </script>

Open in new window


The browsers have a very powerful optionl the develeper tools.If you open you will see (I 'll show in Chrome) something like that:
Capture.JPGAt 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:
Capture.JPGThe 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.
Capture.JPG.

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';
 

})();

Open in new window


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:
Capture.JPG
aaa.png
Ensure you’re charging the right price for your IT

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!

Author

Commented:
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!

Author

Commented:
Hi Leonidas, I will try it now. Thank you!
dbruntonQuid, Me Anxius Sum?  Illegitimi non carborundum.
Commented:
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).
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
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?

Author

Commented:
Thank you guys, I've learned a lot from your comments. More power to you all. God bless!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial