CODEWITHSUNDEEP
javascript
Thomas
Thomas

Reputation: 11888

Is it possible to have an in-browser debugger?

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, i.e. JS code in browser can add it's own breakpoints.

Upvotes: 1

Views: 277

Answers (7)

LeoR
LeoR

Reputation: 716

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.

Upvotes: 0

Josh Jones
Josh Jones

Reputation: 174

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

Upvotes: 3

Simon Sarris
Simon Sarris

Reputation: 63802

F12 in almost any modern browser.

Upvotes: 0

Eganr
Eganr

Reputation: 670

In Google Chrome -> Right Click -> Inspect Element

or

Firebug for Firefox

Upvotes: 0

holographix
holographix

Reputation: 2557

just go for firebug.

http://getfirebug.com

you can also have breakpoints

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

Upvotes: 1

MMM
MMM

Reputation: 7310

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.

Upvotes: 2

Anders Marzi Tornblad
Anders Marzi Tornblad

Reputation: 19305

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.

Upvotes: 9

Related Questions