Chrome Dev Tools - A Tutorial for Non-Developers Google Chrome is an awesome web browser but there’s an even more awesome feature built right inside Chrome that most of us rarely use – it’s called Chrome Developer Tools. Let the word “Developer” not intimidate you because us regular Chrome users, or non-developers, can also benefit from having some basic knowledge of Chrome Dev Tools. Did you know that you can use Chrome as a WYSIWYG editor for web pages? Or that Chrome can work as a Maths calculator? Chrome Developer Tools for Non-Developers Open this demo page inside Google Chrome on desktop and then press Ctrl + Shift + I on the keyboard (or Cmd + Shift + I on the Mac) to open Chrome Dev Tools. 1. With Chrome Dev Tools, you can easily change of the order of elements as they appear on a page by simply dragging them with your mouse. 2. Web pages often use the hexadecimal format for writing colors but if the #AABBCC format makes no sense to you, just write the color names in plain English like Gold, Aqua and more. 3. 4. 5. 6. 7.
elodieunderglass: portraitofdoriangay: Chrome DevTools | Web | Google Developers Chrome DevTools is a set of authoring, debugging, and profiling tools built into Google Chrome. Open DevTools Select More Tools > Developer Tools from Chrome's Main Menu.Right-click a page element and select Inspect.Press Command+Option+I (Mac) or Control+Shift+I (Windows, Linux). Discover DevTools Device Mode Build fully responsive, mobile-first web experiences. Elements panel Iterate on the layout and design of your site by freely manipulating the DOM and CSS. Console panel Log diagnostic information during development or interact with the JavaScript on the page. Sources panel Debug your JavaScript using breakpoints or connect your local files via Workspaces to use DevTools as a code editor. Network panel Optimize page load performance and debug request issues. Performance panel (previously Timeline panel) Improve the runtime performance of your page by recording and exploring the various events that happen during the lifecycle of a site. Memory panel (previously Profiles panel) Application panel
Bow down before the Queen of Blood! - 24 Invaluable Skills To Learn For Free Online This Year - 24 Invaluable Skills To Learn For Free Online This... Console API Reference | Tools for Web Developers | Google Developers Use the Console API to write information to the console, create JavaScript profiles, and start a debugging session. console.assert(expression, object) Writes an error to the console when the evaluated expression is false. console.clear() Clears the console. console.clear(); If the Preserve log checkbox is enabled, console.clear() is disabled. ) or typing the shortcut Ctrl+L while the Console is in focus still works. See Clearing the console for more information. console.count(label) Writes the number of times that count() has been invoked at the same line and with the same label. function login(name) { console.count(name + ' logged in');} See Counting Statement Executions for more examples. console.debug(object [, object, ...]) Identical to console.log(). console.dir(object) Prints a JavaScript representation of the specified object. console.dir(document.body); Learn about the functionally equivalent object formatter (%O) and more in String substitution and formatting. console.dirxml(object) doStuff();