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!
Whing Dela CruzAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ryan ChongBusiness Systems Analyst , ex-Senior Application EngineerCommented:
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 ?
0
Whing Dela CruzAuthor Commented:
Thank you for your Idea Ryan. I will try it now!
0
Leonidas DosasCommented:
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
1

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Whing Dela CruzAuthor 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!
0
Whing Dela CruzAuthor Commented:
Hi Leonidas, I will try it now. Thank you!
0
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).
0
Julian HansenCommented:
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?
0
Whing Dela CruzAuthor Commented:
Thank you guys, I've learned a lot from your comments. More power to you all. God bless!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.