0

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

Community
  • 1
  • 1
William Smith
  • 822
  • 1
  • 10
  • 23
  • 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](https://developers.google.com/chrome-developer-tools/). 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
  • Your best bet is probably a combination of [Firefox/Firebug](http://getfirebug.com/) and "console" messages. Here's one (of many) quickstart tutorials: http://www.developerfusion.com/article/139949/debugging-javascript-with-firebug/ – paulsm4 Jun 15 '12 at 21:20
  • I know it's seems like a sort of vague question but I wasn't sure how to ask it. Years ago, when I was learning to write codes for microcontollers, we had a program that would visually run through the program (in slow motion) and highlight each point as it was executed. It really helped debug the program and it also gave great insight as to what was happening. I was wondering if there was anything like that? – William Smith Jun 15 '12 at 21:46
  • this is in relation to another question that I have already posted, thus the flash tag. Sorry, I probably shouldn't have put it on thisone. http://stackoverflow.com/questions/11038529/flashmovie-play-is-not-a-function – William Smith Jun 15 '12 at 21:49
  • I'm mainly using Firefox/firebug and the web console. But info for all browsers is helpful. Thanks to everyone. – William Smith Jun 15 '12 at 21:54

4 Answers4

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

Community
  • 1
  • 1
Andrew Odri
  • 8,868
  • 5
  • 46
  • 55
1

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

user278064
  • 9,982
  • 1
  • 33
  • 46
1

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.

Robert Niestroj
  • 15,299
  • 14
  • 76
  • 119
1

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

Raab
  • 34,778
  • 4
  • 50
  • 65