Is it possible to have an in-browser debugger?

Question

Is it presently possible to programatically debug Javascript from within a browser window? I wish to be able to breakpoint/inspect Javascript from an in-browser window panel.

EDIT:

I should have been more specific: I'm loogking for an api to be used from within the page context, ie JS code in browser can add it's own breakpoints.

Answer 1

It's already built-in in Chrome and Safari and, to an extent, in Firefox. There exists multiple plugins for this. Look at Firebug for Firefox, and F12 Developer Tools for IE.

Answer 2

If you're using Firefox, try FireBug .

If you're using Chrome, it has an in-built debugger.

For IE there's something called DebugBar and F12 Developer Tools.

Answer 3

Utilize your browser's developer tools: Use browser-specific developer tools, which allow you to identify runt-time errors, set up breakpoints, and run performance diagnostics. To make debugging much easier, don't minify the JavaScript during development deployment.

In IE: IE Developer Tools

Or install the Google Chrome Frame which allows IE to process JavaScript with Google Chrome's V8 engine and allows the user to debug with the Chrome Developer Tools

In FF: Firebug extension

In Chrome: Chrome Developer Tools

Use a static code checker, like JSLint, to verify that JavaScript code complies with generally accepted coding rules.

Use JsFiddle to easily test and improve JavaScript/jQuery functions (http://jsfiddle.net/) This has a JSLint option for parsing the JavaScript

Answer 4

just go for firebug.

http://getfirebug.com

you can also have breakpoints

http://getfirebug.com/doc/breakpoints/demo.html

Answer 5

Yes there are possiblities to do that.

For Chrome for example you can use the the chrome.debugger extension to attach your own debugger-implementation to a website, that runs in another tab/window. Once you are attached, you control the debugger vie a JSON based remote debugging protocol . The biggest problem I would say is, that you have to pipe all your communication through an HTML-Element. This is the case because the extension can only communicate with a content script and the content script can only access DOM-specified attributes.

John Bartons chrome extension crx2app tries to simplify the access to the extension API. I don't know how much it actually supports, but it might also be helpful for developing a Debugger that runs from within the browser itself.

As far as I know Firefox also provides access to its internal JavaScript-Engine Spidermonkey and by extension to its debugging mechanism . But that might in fact collide with a FireBug plug-in, because you can usually only attach one listener to the Debugger. But with the recent release of the new Firefox built-in JavaScript-Debugger , which provides remote-access, this might be no longer a problem.

Answer 6

In Google Chrome -> Right Click -> Inspect Element

or

Firebug for Firefox

Answer 7

在几乎所有现代浏览器中都使用F12。