Google Chromium Gets New DevTools Page

Developer & DesignLeave a Comment

Share this Post

The Chromium project marches on towards making Chrome the best browser in the world. It already made waves last week when it became the number one Web browser in the world for a short while. The new update makes it easier for developers to see what's going on in the background.

A fun thing with the Chromium project is that you can type in chrome://inspect to get a list of all pages. shared workers, extensions, applications and background pages that are running in the browser. It makes the inspection of the various components of Web sites easy to access and view. Now you can inspect all of the pages and extensions with the click of a mouse button.

Let's dig in, shall we? Here's what you can expect to see when you go to chrome://inspect. As you can see, it lists all the Web sites that I have currently open. I can then click on the inspect button next to each Web site and it will direct me to that tab and open the console to view the HTML and JavaScript that's currently powering the Web site. It's a great educational tool for developers wanting to see how other Web sites are built.

Google Chromium Gets New DevTools Page

Let's take as an example. Here's what you can expect with the inspection tools. The elements tool is the most basic allowing you access to the code that's running in the background. You can mouse over specific code and it will highlight what that code powers on the Web page in real time.

Google Chromium Gets New DevTools Page

The other important tab for developers to check out is the scripts tab. This will lay out in detail all the separate scripts running in the background. Once again, it's a great educational tool to see how other Web sites are built.

Google Chromium Gets New DevTools Page

You can see all this and more for yourself with the latest Chromium build available here. You can also view code review page for the new inspection tools here.

[Source: Google Developers Google+]

Leave a Reply