Is there any way to navigate object hierarchies in the developer console of either Chrome, Firefox, or other fairly standards compliant web browser,
using the keyboard? as you would e.g. in an IDE debugger...
Or can you easily hook in to the console from some IDE to get that convenience?
Related
We have a custom web application that gets used via normal desktop browser, including IE, Chrome, and Firefox. When troubleshooting javascript type issues with this application, we can use the F12 button to open the javascript developer console.
This web application is also referenced inside of SAP GUI via the HTML Viewer.
The trouble that we have is that clicking F12 does not open the javascript developer console for us. Does anyone know how we go about opening this javascript developer console for a web application within SAP GUI HTML Viewer?
If you're using newer versions of windows, you might want to give F12Chooser.exe a try. It's the same developer console you would get from hitting F12 on IE, but it gives you the ability to choose a target to debug.
You can find the exe at C:\Windows\SysWOW64\F12\F12Chooser.exe (change SysWOW64 by System32 if you're on a 32bit machine)
Now that Firebug is fading away, Firefox users are asked to switch over to the Firefox Developer Tools.
Therefore I am wondering, which features do the Firefox DevTools have that are not offered by the Chrome DevTools?
Can you please give me an objective answer to this question?
From the docs:
DOM Property Viewer
Inspect the page's DOM properties, functions, etc.
(You'll notice properties of the object are not usually listed in console in Chrome, you would never know that body.innerHTML existed, looking at "document.body" in the console.)
Developer Toolbar
A command-line interface for the developer tools.
Shader Editor
View and edit the vertex and fragment shaders used by WebGL.
Web Audio Editor
Examine the graph of audio nodes in an audio context, and modify their parameters.
Taking screenshots
Take a screenshot of the entire page or of a single element.
Some extra tools in the settings panel:
Measure a portion of the page
Scratchpad
The network panel shows the stack trace of the cause of each network request, in Chrome you have to go through console log of network requests and find the one and expand it. Also, you can see the actual preview (in preview tab) of a xhr response if it happens to be html returned.
And perhaps the most useful, the inspector shows (ev) beside every element with an event listener on it, with direct listing of everything that adds event listener to it. (nicer than Chrome's event tab listing to the right.)
Firefox DevTools
As far as I can see, the Firefox Developer Tools (as of Firefox 54.0.1) have a lot of niche features over the Chrome Developer Tools (as of Chrome 59.0), i.e. very specific tools that are presumably used by a rather small group of people. Besides those special tools, the Firefox Developer Tools also have several core features the Chrome Developer Tools are missing.
The different features are:
Canvas Editor
Web Audio Editor
Shader Editor
Developer Toolbar (GCLI) (will be removed)
Scratchpad
DOM Inspector
Page rulers
Screenshot tools
Font Inspector
Grid Inspector
Measure portions of the page
Firebug theme (got removed in Firefox 61)
Switch between iframes
Tools to debug the browser UI
Security info for individual network requests
Network caching comparison
Chrome DevTools
The Chrome DevTools (as of Chrome 59.0) have more features regarding the standard tools and they provide other niche tools.
Those features include:
DOM and XHR breakpoints
Event listeners panel
Properties panel
Security Inspector
Audits
Touch simulation and pixel density in device emulation
Live editing in Sources panel
Workspaces
Network request blocking
Advanced memory tooling
Manifest, service worker & application cache inspector
Scroll performance issues highlighter
Frames per second meter
CSS Media emulation
Global file search
Code coverage analyser
Geolocation, orientation, and touch emulation
Local overriding of CSS styles
Also, they differ in many smaller features and in their settings.
So in the Chrome version of Firebug, it's lying on top of the window, thus, if the whole window has text, you will have stuff hidden behind the firebug. Is it possible to get it to be like Firefox's version, where it is part of the window screen like the developer console? The options don't seem to point to anything that indicates this option.
The Chrome extension of Firebug is based on Firebug Lite, which is a JavaScript that is injected into the website. So, there is unfortunately no way to integrate it into Chrome's UI.
Furthermore, Firebug Lite (and with that the Chrome extension) is unmaintained for several years now, so it doesn't provide the features integrated developer tools have.
Alternatives are:
Chrome DevTools
Chrome has integrated developer tools, which provide a huge amount of features for web developers.
Firefox DevTools
The Firefox developer tools allow to debug Chrome (and other browsers) remotely. This doesn't work as good as the integrated tools and provides less features, but allows you to use the same tools to debug in different browsers.
debugger.html
The debugger.html project (developed by the Firefox DevTools team) picks up the idea of Firebug Lite by providing a browser independent UI. It's based on a local web server serving a website, which allows you to debug JavaScript code in different browsers by connecting to them remotely. Unfortunately, it currently only provides a JavaScript debugger and it's unclear whether it will be extended to cover other features like an HTML inspector panel, a network panel, etc. later.
This is a question about debugging a project, not about writing the code.
I am on the final stages of developing an HTML5 web app. Fairly last minute, our client tells us it should run on IE8. Since I use the HTML5-canvas in the app, this required the addition of Google Chrome Frame. Once installed and testing, however, IE8's developer console no longer prints any data, and the HTML viewer never loads. Is this a bug? Is there a way to fix it? It will really suck if I need to debug with alerts...
From Google Chrome Frame documentation:
You can use the Web Inspector in GCF just as you would in the Google Chrome browser. To use it, right-click and choose "Inspect Element". Logging is available via the console.log method, and you can set breakpoints and inspect network activity.
For the last few years I have been using Firefox, Firebug, and the Web Devevloper Firefox toolbar for all my web dev needs, quite happily. I am, however, very interested in experimenting with moving my web dev support over to Chrome, but I have no idea where or how to start. How much functionality is build into Chrome and how do I access it? What add-ins do I need and where do I learn about using them?
These are two of many questions I think face most web devs moving into a much less familiar environment. I'm trying to ask a broader question here, along the lines of, what do I need to use and know for effective web deb and JavaScript debugging in Chrome and where is best to learn what I need to?
Google Chrome (as well as Safari) has really underestimated Developer Tools feature. Lots of developers are indifferent to it and use Firebug through habit. (to no purpose!)
But for me it is the main debug tool: it looks more pleasant than the latter and includes a way cooler features. (e.g. Timeline — separate time intervals for Loading, Scripting and Rendering).
Developer Tools Tutorial.
Can't give up with Firebug? Have a look — Firebug Lite.
More tools.
→ Webmaster tools;
→ Speedtracer;
→ Page Speed.
→ From google webmasters-faq:
There are several tools to help you test your website in Google Chrome:
Web Inspector
Right-click on any component on a web page to launch the web inspector. You'll be able to see the elements and resources associated with the component on which you clicked, including a hierarchy view of the DOM and a JavaScript console.
Task Manager
Select the Page menu icon, then Developer > Task Manager (or press Shift+Esc). The task manager shows all running Google Chrome processes, and the resources that they're using (memory, CPU, and network).
JavaScript Debugger
Select the Page menu icon, then Developer > Debug JavaScript. This launches a JavaScript debugger that can be used to attach to existing processes.
in chrome: right click and "Inspect Element"
the Light Version of Firebug is available too.
While in Chrome, press Ctrl+Shift+I and start experimenting. It's all you'll need.
The Web Developer port from Firefox is very handy.