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.
Related
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.
I used this nifty feature that chrome had for quite a while called "canvas inspector". It was an experimental dev feature that had to manually be enabled.
It was quite helpful when working with webgl via something like THREE.js where you can easily create a bunch of undesired draw calls by accident.
Also, it worked on any website, you could simply take a snapshot and see whats going on in the canvas.
It... miraculously disappeared one day, and google does not give any insight.
I've tried some extensions but they dont feel nearly as good, or i couldn't even get them to work. Is there another way to get this back into chrome?
Apparently it was doing some cheeky stuff that they didn't want in the main project so it was removed in this issue: DevTools: make Canvas profiler an extension
We can make it an extension though. This bug is for tracking removal of the canvas profiler from the DevTools. There will be a separate initiative of porting the code being removed into github and publishing it as a Chrome extension.
According to that issue they might move it to an extension in the future but I haven't found any traces of it as of now. They haven't responded to a question in the above issue about where the new issue could be tracked.
Chrome and Firefox have both removed their Canvas inspectors...
Original Answer:
This is not exactly what the question asks for, but Firefox has a canvas inspector integrated:
https://hacks.mozilla.org/2014/03/introducing-the-canvas-debugger-in-firefox-developer-tools/
You can enable it in the settings of the normal inspector
EDIT: (2019)
The Canvas Inspector has been removed as of Firefox 67:
Mozilla deprecated listing
Bug report with reasoning
Alternative:
spector.js - Recommended alternative by Mozilla
Canvas inspection was just removed!
You can download an old version of Chromium here like Chromium_OSX_43.0.2357.81.dmg. (Provided by freesmug)
Happy Canvas Inspection!
This is the best extension inspector I’ve seen so far.
https://spector.babylonjs.com
First go into
chrome://flags
Then enable
Developer Tools experiments
Then after restarting your browser, open the devlopers tools by hitting f12, then in the top right corner is a gear. Click on it, go to experiments, then find "canvas inspection". It's unstable, but usable.
i wanted to build a custom browser install that would fit the following specs, i found ways to do it using enterprise deployement, but my intent is to distribute it to friends and family without having to go through the enterprise distribution.
Can be sourced from Firefox or Chromium (or even other as webkit)
Should be easy to customize (ideally no C++ coding)
Should be able to embed extension or hard code the extension within the browser. (i've coded a custom adblock that is lighter and faster than the ones on FF or Chrome store and would also like to embed TOR connection extension)
Remove the ability to install other extensions (i want to ensure this browser cannot be victim of bloatware extensions installs)
Customize UI
Protect the browser against Search engine / HP / New tab settings change.
If you could point me to the right direction it would be awesome and i'll make sure to share this browser's link here once done.
I just saw this in the corner of my eye and figured I'd share this question/answer to possibly help you:
Standard way to build a Chrome extension into Chromium
I am fairly new to writing code, but I played around with some chrome apps which use WebSQL for DB. I decided to learn IndexedDB, but needed something more visual, to help me out. WebSQL database entries can be easily seen in in resources tab in "debugger", but indexedDB database is not shown there.
Chrome is v17, OS Ubuntu 11.10
Is there a workaround for this( plugin or anything else) ?
If you use Chromium or the dev channel of Chrome you can enable an experimental Dev Tools feature to surface IndexedDB in the Resources panel.
https://plus.google.com/u/0/100132233764003563318/posts/7pbJUZCGk8U
In chrome, click on developer tools or use ctr+shift+I
Click on the application menu
Right click on IndexDB
Click Refresh IndexDB
Then you will see your database content.
The accepted answer is 10 years old, mentioning experimental DevTools. So, I decided to rewrite answer.
In Chrome, press F12 or click application menu > More Tools > Developer Tools to open Chrome Developer tools.
Go to Application tab.
On the menu left, expand IndexedDb under Storage section and you will see your IndexedDb content.
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.