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.
Related
I was recently using the dev tools in Firefox and noticed you could turn on and off certain menus (styles, network, storage, etc.) . When back in the Chrome dev tools, I looked for the same check-boxes / functionality to no avail.
A bit of googling got me no where, nor any answers here. I've read that I could go and manually alter the dev tools in Chrome / make plugins / etc, but was wondering if I just overlooked this feature or if someone has already made this wheel?
Thanks.
Edit: pictures
highlighted firefox dev tool settings
firefox dev tools with added toolbar
I'm the Chrome DevTools technical writer. This feature doesn't exist. I created a feature request here: https://crbug.com/888667
If you want this feature, star the request. The more stars a request gets, the more likely it is that the team will implement the feature.
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.
Chrome's developer tools have a feature called Resources tab. In some cases, it's very useful. I cannot find it in Firefox. I wonder if there is anything in Firefox's developer tools or Firebug equivalent to it?
Unfortunately it is not currently present in Firefox Developer Tools, but will be starting from Firefox 34, to be released in November. See section Storage inspector in the following article: https://hacks.mozilla.org/2014/09/webide-storage-inspector-jquery-events-iframe-switcher-more-firefox-developer-tools-episode-34/
Regarding Firebug, some features are already implemented such as cookies inspection, but some others might require additional extensions. See for instance Firestorage Plus! for local and session storage.
Otherwise, you need to use other extensions (not related to Firebug at all) or techniques to inspect things such as the application cache, or IndexedDB content. All depends on what features from the Resources inspector of Chrome you are actually looking for.
Early on I was doing some debugging and testing using the chrome dev tools(known as inspect element). I found out that on the Resources column of the dev tool, Chrome can always access the resources from the server and display them(links, videos, images....). Just wonder how Chrome does that. Is there any way to write a piece of code doing the same thing(access the server resources of other websites, not modifying them but displaying, stuff like, the link of the video currently playing on the website, which usually does not pop up until the play button is hit)?
DevTools doesn't fetch resources from a site. It fetches them from the browser.
There were similar questions already
How does webkit/chrome's WebInspector Resources Inspection work?
and
Getting Information from Google Chrome's Developer Tools
The Chrome Developer Tools has two parts frontend (html+javascript) and backend (C++) and there is an API which specifies the protocol between these parts. You can see the specification here. You can use it for writing your own app instead of standard DevTools frontend.
Also there is experimental debugging API for chrome extensions.
I think the Webkit WebInspector go over the hole source code and match all resources of the source.
So it match <link href="something.css"> and then it place something.css in the resource panel under stylesheets. And exactly the same thing for the other tags.
It's not hard to make regexes for this.
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.