Chrome DevTools Overview

Chrome Devtools Cheatsheet Opening Devtools ◊ To access the DevTools, on any web page or app in Google Chrome you can use one of these options: Open the Chrome menu at the top-right of your browser window, then select Tools > Developer Tools. To open up the General Settings dialog type ? All Panels Elements Panel ◊ Right-clicking an element you can: Force element psuedo states: (:active, :hover, :focus, :visited) Set breakpoints on the elements: (Subtree modifications, Attribute modification, Node removal) Clear console Styles Sidebar ◊ Emulate an element's pseudo state (:active, :hover, :focus, :visited) Add new style selectors Network Panel ◊ Understanding the information displayed within each column Size: Total size of resource Content: Gzipped size of resource Time: total duration to get response Latency: time taken to get first byte File that initialized the resource load How the resource load was scheduled Select the Timeline heading to change sort modes for the network. Sources Panel ◊

Learning Chrome Web Developer Tools Released All major browsers include developer tools, which enable developers to examine the code of a webpage or app, as well as run tests and evaluate metrics related to that code. Chrome Developer Tools (DevTools for short) is the industry standard. Explore how the tools work in actual testing and debugging scenarios and get an expanded toolbox for your day-to-day work. This course teaches the most widely used parts of DevTools, using sample files to walk through identifying issues and bugs, fixing them, and then verifying that they've been fixed. Each chapter digs into a different tool, including the Console, Elements panel, and Network panel, exploring how it's useful and when to use it. Topics include: Setting up your testing and debugging environment Customize the display of Chrome Developer Tools Inspecting elements and styles Using the Console Opening source files in the Sources panel Identifying code that slows page loading Emulating mobile connections Skill Level Intermediate

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

Chrome DevTools Overview 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

Learn How To Debug JavaScript with Chrome DevTools – codeburst That’s the basic idea of stepping through code. If you look at the code in get-started.js, you can see that the bug is probably somewhere in the updateLabel() function. Rather than stepping through every line of code, you can use another type of breakpoint to pause the code closer to the location of the bug. Line-of-code breakpoints are the most common type of breakpoint. When you’ve got a specific line of code that you want to pause on, use a line-of-code breakpoint. Look at the last line of code in updateLabel(), which looks like this: label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum; To the left of this code, you can see the line number of this particular line of code: 32. Click the Resume script execution button: The script continues executing until it reaches the line of code you placed the breakpoint on. Look at the lines of code in updateLabel() that have already executed. The value of sum looks suspicious. One DevTools alternative to console.log() is Watch Expressions.

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.

Get Started with Debugging JavaScript in Chrome DevTools  |  Tools for Web Developers  |  Google Developers This tutorial teaches you the basic workflow for debugging any JavaScript issue in DevTools. Read on, or watch the video version of this tutorial, below. Step 1: Reproduce the bug Finding a series of actions that consistently reproduces a bug is always the first step to debugging. Click Open Demo. The demo opens in a new tab. Step 2: Get familiar with the Sources panel UI DevTools provides a lot of different tools for different tasks, such as changing CSS, profiling page load performance, and monitoring network requests. Open DevTools by pressing Command+Option+I (Mac) or Control+Shift+I (Windows, Linux). The Sources panel UI has 3 parts: The File Navigator pane. Step 3: Pause the code with a breakpoint A common method for debugging a problem like this is to insert a lot of console.log() statements into the code, in order to inspect values as the script executes. The console.log() method may get the job done, but breakpoints can get it done faster. Step 4: Step through the code Next steps

Where is the Space Station? – Code Club First open the url for the web service in a new tab in your web browser: should see something like this:{ "iss_position": { "latitude": 8.54938193505081, "longitude": 73.16560793639105 }, "message": "success", "timestamp": 1461931913 }The result contains the coordinates of the spot on Earth that the ISS is currently over.Longitude is the East-West position and runs from -180 to 180. 0 is the Prime Meridian which runs through Greenwich in London, UK.Latitude is the North-South position and runs from 90 to -90. 0 is the Equator.Now you need to call the same web service from Python. Add the following code to the end of your script to get the current location of the ISS: Let’s create variables to store the latitude and longitude, and then print them: It would be more useful to show the position on a map.First we’ll need to import the turtle graphics library.