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

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

• javascript
• html
• css
• flash

• 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 Commented Jun 15, 2012 at 21:10
• What browser are you using? Google Chrome in particular has a great set of built-in tools for this. – Brad Commented Jun 15, 2012 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 Commented Jun 15, 2012 at 21:11
• Is the Flash tag relevant at all? – millimoose Commented Jun 15, 2012 at 21:11
• @kevin628 The relevant code and a closer description of the problem, you mean. – millimoose Commented Jun 15, 2012 at 21:12

4 Answers 4

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./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.

These questions should help as well:

• How to step through code in Google chrome javascript debugger
• How to set breakpoints in inline Javascript in Google Chrome?
• Javascript breakpoints not working in Chrome Developer Tools
• Set a breakpoint in XHR in Chrome

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

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.

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