Hacker Read top | best | new | newcomments | leaders | about | bookmarklet login

Click to inspect is in, they even have an example of using it in the linked introduction to developer tools. [1]

/works at Microsoft, but not on IE

[1] http://blogs.msdn.com/b/ie/archive/2013/07/29/debugging-and-...



sort by: page size:

Hi,

For IE debugging you can use DebugBar (http://www.debugbar.com/) and Companion.JS (http://www.my-debugbar.com/wiki/CompanionJS/HomePage) that give dev tools for developers : DOM inspector, HTTP viewer, JS console, etc...

Hope this helps.

JFR http://www.debugbar.com


IE developer toolbar really helps with JavaScript and CSS debugging. It believe it is built into IE 8. http://www.microsoft.com/downloads/en/details.aspx?FamilyID=...

Yup, the IE devtools are named "F12" after the keyboard shortcut:

http://msdn.microsoft.com/library/ie/bg182326%28v=vs.85%29

(F12 is also the keyboard shortcut for opening the developer tools in Chrome, Firefox, and others.)


The Microsoft Edge browser has had this feature for two or three years, by the same name. Chrome has something similar.

https://docs.microsoft.com/en-us/microsoft-edge/devtools-gui...


Since so many are complaining about the difficulty of developing/debugging in IE here is a couple of links that should make it easier for you

Internet Explorer Developer Toolbar http://www.microsoft.com/en-us/download/details.aspx?id=1835...

VPC Images for XP/IE6, Vista/IE7, Win7/IE8, Win7/IE9 - you can import the images to VMware and VirtualBox http://www.microsoft.com/en-us/download/details.aspx?id=1157...

MS Script Debugger and how to http://blogs.msdn.com/b/ie/archive/2004/10/26/247912.aspx

Detecting Memory Leaks http://blogs.msdn.com/b/ie/archive/2007/11/29/tools-for-dete...

VS Express (free) http://www.microsoft.com/visualstudio/en-us/products/2010-ed...

Firebug Lite http://getfirebug.com/firebuglite

I'm sure there are more some where...


Microsoft's Visual Studio doesn't do a horrible job of IE debugging. Just download the web dev Express version (free) and turn on script debugging in your Advanced Options.

Opera used to have its own debugging/inspection tool[1] as well. It was released in 2008, it was open-source[2] (unlike the browser), didn't required plugins like firebug at the time, had handy remote debugging, overall I enjoyed it the most. But it died with the browser. Honestly, I'm surprised it's still up somewhere.

1. https://www.opera.com/dragonfly/

2. https://github.com/operasoftware/dragonfly


How do you do anything front end related without a browser with inspect element/dev tools?

You're right, looks like it did have an installable debugger way back when:

http://www.rdwarf.com/users/wwonko/jscript/jsd.pdf

Although the Developer Toolbar had dom explorer and all that jazz, way more than a console, it really was amazing when I first used it.

Here's the release blogs:

https://blogs.msdn.microsoft.com/ie/2005/09/16/developer-too...

https://blogs.msdn.microsoft.com/ie/2007/05/10/internet-expl...


Nice article. Not just for beginners either. Ive been debugging javascript since IE6 and didnt know about

"If you click the braces at the bottom of the developer tools, they will “pretty print” the code. It makes it a little bit more readable, but it’s still difficult to decipher.

(granted, javascript consoles were a bit different back then: http://notetodogself.blogspot.com/2008/08/debug-javascript-i...)


Chromium Edge reimplemented it in their devtools: https://blogs.windows.com/msedgedev/2020/01/23/debug-z-index...

Note that Visual Web Developer can be used as a script debugger for IE.

Another! If you inspect a console.logged function, DevTools shows you the scope it has access to.

https://umaar.com/dev-tips/117-inspect-function-scope/


They are on Firefox at least, I assume Chrome too, there's a Vue devtools extension for example that adds a tab alongside inspect, console, debugger, et al. to give you a sort of Vue-aware 'inspect'.

> Can anybody recommend a tool to look what Javascript code loaded by a certain page is doing?

Open your browser's developer tools, go to the Script/Debugger tab and have at it. It's just about as obtuse to use as a tool as gdb, but you'll see exactly what it does. Chrome dev tools has automatic formatting of the code, maybe firefox too. But you'll be stuck with shitty variable names if they been mangled. Although you could try http://www.jsnice.org/, I had variable luck with using it.

It would be interesting to have a browser tool that is like strace and you could filter by calls, so you can see exactly where window.navigator is being used for example, or localStorage.setItem. For now best you can do is searching for "navigator" which works, but can be minified/hidden away by coder as well.


You can also use monitor(func), debug(func) and inspect(func) and more :) https://developer.chrome.com/docs/devtools/console/utilities...

If you’re talking about JavaScript, have you tried the GUI debugging tools built into each browser?

https://developers.google.com/web/tools/chrome-devtools/java...

There’s also a lot of features for viewing and experimenting with CSS.

https://developers.google.com/web/tools/chrome-devtools/css/

Disclaimer: I wrote those docs. Firefox and Safari have similar tools if you prefer those browsers. I’m just not as familiar with their stuff.


This has worked on Firefox since the beginning of time. One could use the DOM inspector and venkman JS debugger, then Firebug chrome inspector and more recently the Firefox developer tools to inspect Firefox's XUL.

https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox...


I haven't had to deal much with IE in the last couple of years, but when I did, the only sane way I found to debug JS code was to have Visual Studio installed, and to use the VS debugger to hook into JS code.
next

Legal | privacy