This video tutorial introduces you to the Chrome Dev Tools, one the best feature of chrome, not even developers can use and benefit from.
Google Chrome is an awesome Web browser, but there are even more amazing features built directly inside the chrome that most of us rarely use – this is called chrome Developer Tools. Let the word "Developer" does not scare you, because we are regular users of Chrome, or developers can also have some basic knowledge about Chrome Dev Tools.
Did you know that you can use Chrome as a WYSIWYG editor for Web pages? Or that chromium can work as a math calculator? Or you can perform date calculations inside chrome? This video tutorial will walk you through a couple of examples of where you can use the developer tools.
Open this page demo inside Google Chrome on your desktop and press Ctrl + Shift + I on the keyboard (or Cmd + Shift + I on Mac) to open the Chrome Dev Tools. Now click the magnifying glass icon in the lower left of the chrome, hover your mouse over the title of the page, and then double-click the selected HTML code into the Dev Tools for editing the header.
With the Chrome Dev tools you can easily change the order of the elements as they appear on the page by dragging them with the mouse. Click on the magnifying glass icon, hover over any element on the page — paragraphs of text, image, or list items, and then drag the selection to place it elsewhere.
Web pages often use hexadecimal format for writing colors but if #AABBCC format does not make sense for you, just write the color names in plain English, like gold, Aqua, and much more. Just enter the first character and the chrome Dev tools will show all available colors that start with that letter.
Chrome can automatically fill in the password field on the login form on a Web page, but that the password cannot be viewed because it is hidden behind the asterisk characters. However, you can use the Chrome Dev Tools change the password input field of type "password" in the "text" and reveal hidden password.
A Web page for editing in a browser, but there is a little trick that will allow you to edit the built-in Web pages, how do you make the word processor. Open Chrome Dev Tools, go to console and type = true document.body.contenteditable in command line. Voila! The page becomes editable.
When the active tab "console", you can write arithmetic expressions and also calculates a date as the number of days between two dates or write the date in the form of a human-readable string. A little unsure of the date object in JavaScript will come in handy. Chrome saves the previous computations in the $ _ special variable that can be used in the long-running calculations.
Multi-line commands are run in a console window to parse and extract data from Web pages. For example $ $ (' a ') selector will hold all the hyperlinks that are embedded in the page. Then you can use a simple for loop to export these hyperlinks in plain text.
URL = $ $ (' '); for console.log (URL in URLs) (URL [url]. href);
Some Web may request your location for personalization and chrome Dev Tools, you can easily fake location. Click the options button in Dev Tools and share a different set of latitude and longitude values from this site.
Post a Comment