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 ◊
bank AG Sowohl Käufer als auch Verkäufer werden im Rahmen von Transaktionen auf Anzeigen-Portalen vermehrt aufgefordert, ihre Kreditkartendaten weiterzugeben oder auf Webseiten einzugeben, auf die Betrüger sie weiterleiten. Begründet wird dieses durch eine einfache und sichere Zahlungsabwicklung. Tatsächlich werden aber auf diesem Weg Kartendaten abgegriffen und in der Folge eingesetzt. Zum Teil werden Visa-Secure-Zahlungen ausgelöst, die eine TAN-Freigabe erfordern. Die Betrüger fordern zur Weitergabe der TAN oder Eingabe auf einer gefälschten Webseite auf. Bei jeder TAN-Freigabe erhalten Sie einen Hinweis, wofür diese TAN verwendet wird. Bitte prüfen Sie sorgfältig, ob Sie tatsächlich das von den Anzeigen-Portalen angebotene Bezahlverfahren verwenden. Lassen Sie umgehend Ihre Karte sperren, wenn Sie befürchten, Ihre Kartendaten an Dritte weitergegeben zu haben. Bitte beachten Sie auch unsere weiteren Sicherheitshinweise
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
CSS Grids – Einführung in Gestaltungsraster mit dem Grid Layout Module | kulturbanause® blog Komplexe Weblayouts lassen sich weder mit float-basierten Gestaltungsrastern noch mit Flexbox perfekt umsetzen. Die Floating-Technik wurde nicht zur Konstruktion komplexer Layouts entwickelt, was wir u.a. daran merken, dass wir Elemente nicht nach oben und unten verschieben können. Flexbox ermöglicht es zwar die Gestaltung vollständig vom HTML-Code zu trennen, bietet sich aber eher für lineare Strukturen an als für verschachtelte. CSS Grids ermöglichen »echte« Gestaltungsraster auf Basis von CSS. In diesem Beitrag beschreiben wir, wie Layouts mit Hilfe von CSS Grids konstruiert werden können. Grundlegende Funktionsweise CSS Grids arbeiten mit einem Elternelement, in dem das Raster definiert wird und mit darin enthaltenen Kind-Elementen, die im Raster positioniert werden. Das folgende Beispiel erzeugt ein CSS Grid mit drei Zeilen und vier Spalten. <div class="container"><div>Element 1</div><div>Element 2</div> … <div>Element 11</div><div>Element 12</div></div> Beispiel anschauen Tools
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.
ARIA Labels and Relationships | Web Fundamentals | Google Developers Labels ARIA provides several mechanisms for adding labels and descriptions to elements. In fact, ARIA is the only way to add accessible help or description text. Let's look at the properties ARIA uses to create accessible labels. aria-label aria-label allows us to specify a string to be used as the accessible label. You might use an aria-label attribute when you have some kind of visual indication of an element's purpose, such as a button that uses a graphic instead of text, but still need to clarify that purpose for anyone who cannot access the visual indication, such as a button that uses only an image to indicate its purpose. aria-labelledby aria-labelledby allows us to specify the ID of another element in the DOM as an element's label. This is much like using a label element, with some key differences. Importantly, aria-labelledby overrides all other name sources for an element. Relationships aria-labelledby is an example of a relationship attribute. aria-owns aria-activedescendant
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