background preloader

Code School - Discover DevTools

Code School - Discover DevTools 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.

Element Queries I'm getting more and more requests for "Element Queries", and it's getting annoying to address them via Twitter, so I thought I'd discuss the limitations and challenges of this idea right here and just point people to it when required. What's an Element Query? The idea of Element Queries is pretty simple - it's like a Media Query (specifically, the min-width/etc queries), but for a parent or ancestor element, rather than the viewport. This way, you could create a "component" that is styled one way when it's in a narrow container (like a sidebar), but another way when it's got some breathing room (like in the main content of the page), without having to manually specify what kinds of containers are each type - it just naturally happens due to the width of the respective containers. Circularity The first and most obvious problem with EQs is circularity. There are lots of ways in CSS for an element's width to depend on the size of its contents. Avoiding Circularity Viewport Elements

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

Google y Code School lanzan un curso online para desarrolladores El equipo de Google ha anunciado un nuevo recurso online para aquellos desarrolladores interesados en conocer todo el potencial de Google Chrome Developer Tools. Es un curso online denominado Discover DevTools, al que podremos acceder de manera gratuita desde la plataforma de Code School. El plan de estudio que propone es de siete lecciones, donde se mostrarán desde los conceptos básicos, características menos conocidas hasta algunos trucos y tips para mejorar la productividad como programador. Además de contar con diferentes evaluaciones para probar el nivel de conocimiento adquirido. Los requisitos son tener conocimientos en HTML, CSS y JavaScript, y como bonus, inglés, ya que la totalidad del curso será impartido en ese idioma. Para comenzar este curso interactivo solo tenemos que dar enter en Start Course para ver un resumen de los contenidos, los videos introductorios ( con la opción de descargarlo como mp4) y la posibilidad de ingresar en la plataforma.

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();