Google Chrome is a good browser and is used by millions, however there’s a cool feature built in Chrome that most of users rarely use – it’s known as Developer Tools. Don’t be scared of the word “Developer” confuse as non-developers also can use and benefit from using some basic knowledge of Dev Tools.
You can use Chrome as editing program which allows a developer to see what the end result will look like while the interface or document is being created and / or content displayed (text and graphics). it can be edited in a form closely resembling its appearance when printed or displayed as a finished product, such as web page or slide presentation. Or Chrome will work as Calculator for math or date.
Let’s cover some of the features, that probably you did not know were built in Chrome.
Chrome Developer Tools
Chrome Dev Tools has several built-in shortcut keys that can save you time in your daily workflows. While in Chrome, simply use next shortcuts to get the tool
| Access Dev Tools | On Windows | On Mac |
| Open Developer Tools | F12 or Ctrl + Shift + I | Cmd + Opt + I |
Overall, there are eight main groups of tools available in Developer Tools:
Elements, Resources, Network, Sources, Timeline, Profiles, Audits and Console
The Elements panel lets you see everything in one DOM tree, and allows inspection and on-the-fly editing of DOM elements. It allows you: Inspect and edit on the fly any element in the DOM tree in the Elements panel.
– View and change the CSS rules applied to any selected element in the Styles pane.
– View and edit a selected element’s box model in the Computed pane.
– View any changes made to your page locally in the Sources panel.
We are not going to cover all the groups in this article, but cover one that is most often used – Elements.
Rearranging the text or images on page
In Elements panel, You can easily change order of any element on page (text or image) with simple drag and drop. as show below, you can easily find element you want to modify and then move around.
changing colors
Web pages use the hex format for writing colors however if the #RRGGBB format makes no sense to you, simply write the color names in plain English like black, blue and so on. And even if this is not something you are looking for, then simply start typing first letters of the color and Dev Tools will start listing all the accessible colors that begin with written letters.
How to unhide password on page
Chrome auto-fills the password field on a login form of a web page but you can’t view that password as it’s hidden behind asterikses. You can use Dev Tools to change input method in password field from “password” to “text” and reveal the hidden password.
Search, Replace or change format of any text on Webpage
in order to replace the word orsentece in any website do next, open on page Dev tools and in Consol enter:
document.body.innerHTML = document.body.innerHTML.replace(/Donald Trump/g, “Svanius Mestieli”)
also, if you wish to replace all of the misspelled of occurrence, you could use either of these:
document.body.innerHTML = document.body.innerHTML.replace(/(reed|raed|reeed)/g, “read”)
The same technique can be used to format words inside a page as well. For instance, the next command will bold all instances of the word Hello on a page.
document.body.innerHTML = document.body.innerHTML.replace(/welcome /g, “welcome“)
Search in websites directly from the address bar
Chrome adds every website we visit and every search we perform in to search engine list, which allows us to search for information directly from address bar, without going to actual website or to Google. Once you start typing name of the website, beside the name on right corner, a hint tab will pop: Press Tab to search [website name]. once Tab is pressed a solid block with site name and search icon will appear on the left side:
Hidden Internal Chrome:// Pages
Google Chrome’s internal chrome:// pages contain experimental features, diagnostic tools and other statistics. They usually are hidden but it is easy to access, so ets start:
Chrome://About
The chrome://about page lists all Chrome’s internal pages. Click any of the links to access the page. Many of them are the same pages, you see or use on daily bases in Chrome’s menus — for example, chrome://bookmarks is the bookmarks manager and chrome://settings is Chrome’s options page.
Chrome://Flags
[WARNING These experimental features may change, break, or disappear at any time. We make absolutely no guarantees about what may happen if you turn one of these experiments on, and your browser may even spontaneously combust. Jokes aside, your browser may delete all your data, or your security and privacy could be compromised in unexpected ways. Any experiments you enable will be enabled for all users of this browser. Please proceed with caution. Interested in cool new Chrome features? Try our beta channel at chrome.com/beta.]
The chrome://flags page, previously known as the chrome://labs page. It is, I think the most interesting page. This page has experimental features that are not enabled yet — Google warns you that your browser may “spontaneously combust” if you enable these features. They may have security, privacy or stability problems or cause data loss. So Use these options at your own risk!
Chrome://Net-Internals – mostly network diagnostic information and tools
Chrome://Crashes – page lists crashes that happened with Chrome, You’ll only see the list if you have the “Automatically send usage statistics and crash reports to Google” option enabled.
Many of the other pages are technical data, listing debug information. i.e. the chrome://flash page shows information about the flash plug-in and the chrome://sync-internals, displays the state of Chrome’s sync process. Feel free to check the rest of the pages on your own.
Svanews 
Leave a Reply