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.
Related
I have been using Adobe Dreamweaver (2005) for doing web development. I recent switched to VS Code. Dreamweaver has a built in browser where I can inspect a HTML element and it will find it in the editor immediately. This comes in really handy especially when I'm working on messy projects that have been evolving for years. I really like a lot of things about VS Code but this feature is important in saving me a lot of time. Is there any way to get this feature in VS Code?
Thanks
The feature you're looking for is now built into every major browser in the form of dev tools: https://developers.google.com/web/tools/chrome-devtools/open#elements
You can simply click on an element, and in a separate pane, you will be shown the corresponding code.
You can also link DevTools directly to VS code via the extension debugger for chrome in the VS code marketplace - or debugger for Firefox, etc.
However, I recommend starting with the browser dev tools if you're not familiar with them already, as they are simple to use and require no configuration.
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.
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.
The usual recommendations for a web development and debugging web browser are Firefox/Firebug or Safari/Web Inspector.
But I like Google Chrome, and would like to use this as my primary development browser. What plugins or tools should I get to optimise my web programming experience with Chrome?
Google Chrome's own "Firebug" is very good, just right click and inspect element to bring it up.
Frame two pages is helpful.
Chris Pederick's Web Developer toolbar is good too.
The Development and Coding Search (Chrome extension) is one of many Chrome extensions for developers. See the featured web development extensions for more developer-friendly extensions.
Pendule has a lot of good bits and bobs under one extension/icon. Few things I like about it...
View generated source
Colour picker
Ruler
Validator
There are probably tons of alternatives, but it's the best I've seen so far.