current community

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

Is there anyway that I could trace/see the exact order that a website is processed across html, css and javascript?

I have a function that is not firing off on the first pass and I'm pretty sure it has to do with the order of execution. but also, it would be very informative to see the individual steps as they are processed (slowly)

Thanks for any advice.

this is in relation to this question: flashMovie.Play is not a function

share|improve this question
 
Not sure I understand the question very well, it seems like what you're looking for are a browser's developer tools. (E.g. Chrome's. Every browser has them and they all have a Javascript debugger.) –  millimoose Jun 15 '12 at 21:10
 
What browser are you using? Google Chrome in particular has a great set of built-in tools for this. –  Brad Jun 15 '12 at 21:10
 
if the issue is with javascript, we might be able to help if you post the source code for your page. –  kevin628 Jun 15 '12 at 21:11
 
Is the Flash tag relevant at all? –  millimoose Jun 15 '12 at 21:11
 
@kevin628 The relevant code and a closer description of the problem, you mean. –  millimoose Jun 15 '12 at 21:12
show 4 more comments

4 Answers

up vote 2 down vote accepted

It sounds as if you want to set up breakpoints in your code, and then step through the execution path.

  1. Click on the Wrench symbol on the top right of the Chrome screen, select Tools, and select Developer Tools
  2. Click on the Scripts tab on the bottom pane of the Chrome Screen
  3. Click on Folders on the top left corner of the bottom pane of the Chrome Screen
  4. Click on the script that you want to debug
  5. Click on the line that want to setup the breakpoint

The Chrome Developer Tools official documentation is also available here: https://developers.google.com/chrome-developer-tools/docs/scripts

Once you have hit the desired breakpoint (which could just be the first line of the script), the click on the "Step into next function call" (it looks like a down arrow pointing to a dot) button on the top right section of the bottom pane of the Chrome screen.

Screenshot of Chrome Script Debugger

These questions should help as well:

share|improve this answer
 
thanks a lot! that's perfect. –  William Smith Jun 15 '12 at 23:13
add comment
up vote 1 down vote

In Chrome, use the Developer Tool Bar. Press the Keyboard Key: F12.

share|improve this answer
add comment
up vote 1 down vote

Place an alert(1); or console.log(2) in your JS and see what happens. If you use Firefox start with opening its web console and look if you get any errors there. Ctrl+Shift-K to open the Web Console.

share|improve this answer
add comment
up vote 1 down vote

Press F12 OR Ctrl+Shift-K for developer tools, it works almost in any browser. you will be debug your code and use consol

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.