Chrome Developer Tools (Tutorial)

Applying Chrome Developer Tools effectively (Tutorial)

Language: German

Apply Chrome Developer Tools effectively (Tutorial)

With the Chrome Developer Tools, you can analyze and edit your web pages, perform performance analysis, and test your pages for different devices and screen sizes. In this tutorial, you will learn about the most important functions of the DevTools. Learn how to uncover errors in HTML, CSS, and JavaScript, find ways to optimize performance and memory usage, and improve the layouts of your pages - Trainer Stephan Haewß will show you how to proceed using practical examples!

Learn the most important functions of the Chrome Developer Tools
Debug and optimize HTML, CSS, and JavaScript code
Trace code execution, uncover errors, and fix them
Adjust CSS animations, styling, and layouts
Improve performance and memory consumption of websites
For error-free and fast websites with optimized layouts - a over six-hour course by trainer Stephan Haewß

Clean code significantly contributes to the visibility of your websites. Learn how to use the Chrome DevTools now to analyze and optimize your pages.

Zugriff auf alle Inhalte

In der Mitgliedschaft ab * € monatlich

oder

Inhalt in den Warenkorb

Sofort-Download nach Kauf: einmalig * €

Details

content: 6 h Video training
Licence: private and commercial Rights of use

Introduction to the course on the Chrome Developer Tools

free of charge

Chrome Developer Tools: 1.1 | What are you learning in this course?

Here an overview is given of all the topics that are covered in this course.

To the text tutorial

Chrome Developer Tools: 1.2 | Creating test web app

free of charge

Chrome Developer Tools: 1.2 | Create test web app

The first web app is being created, with which the first steps in using the Dev Tools are explained.

To the text tutorial

free of charge

Chrome Developer Tools: 1.3 | First Overview of the Functionalities

Introduction to the various panels of the DevTools and their basic functionality.

To the text tutorial

Styling, layout, appearance via Elements tab

Chrome Developer Tools: 2.1 | Inspecting DOM structure in the Elements tab

Chrome Developer Tools: 2.1 | Inspect DOM structure in the Elements tab

Detailed examination of the HTML structure of a website and how to select and edit elements in the Elements tab.

To the text tutorial

Chrome Developer Tools: 2.2 | Change style

Live editing of CSS styles and examination of the influence on the display of the website.

To the text tutorial

Chrome Developer Tools: 2.3 | Edit HTML, DOM

Changing the HTML structure and observing the effects on the DOM.

To the text tutorial

Chrome Developer Tools: 2.4 | Mobile view - Test responsive design

Simulation of various device sizes and verification of the adaptability of the website.

To the text tutorial

Chrome Developer Tools: 2.5 | Practical Exercise: Fixing the page menu

Fixing an error in a side menu.

To the text tutorial

Chrome Developer Tools: 2.6 | Practical Exercise: Fixing Layout/Overflow

Solution of layout problems and overflow errors.

To the text tutorial

Script debugging via Sources and Console

Chrome Developer Tools: 3.1 | Introduction: Script Debugging and setting the first breakpoint

Chrome Developer Tools: 3.1 | Presentation: Script Debugging and setting the first breakpoint

Introduction to debugging JavaScript code and setting breakpoints.

To the text tutorial

Chrome Developer Tools: 3.2 | Practical Exercise: Debugging TypeScript App

Chrome Developer Tools: 3.2 | Practical Exercise: Debugging a TypeScript App

Debugging of TypeScript code with the DevTools.

To the text tutorial

Chrome Developer Tools: 3.3 | Practical Exercise: Debugging – Finding Errors when deleting from Array

Chrome Developer Tools: 3.3 | Practical exercise: Debugging - Find errors when deleting from an array

Search and fixing an error when removing elements from an array.

To the text tutorial

Chrome Developer Tools: 3.4 | Practical Exercise: Debugging a React app

Chrome Developer Tools: 3.4 | Practical Exercise: Debugging React App

Specific debugging techniques for React applications.

To the text tutorial

Chrome Developer Tools: 3.5 | Conditional Breakpoints

Setting breakpoints that are only triggered under certain conditions.

To the text tutorial

Chrome Developer Tools: 3.6 | DOM-Breakpoints

Monitoring of changes to specific DOM elements.

To the text tutorial

Chrome Developer Tools: 3.7 | Fetch-Breakpoints

Pausing the code during network requests.

To the text tutorial

Chrome Developer Tools: 3.8 | Exception Breakpoints

Automatic pausing in case of errors.

To the text tutorial

Chrome Developer Tools: 3.9 | Overrides and Workspace

Adjustment of styles and scripts without changes to the original code.

To the text tutorial

Chrome Developer Tools: 3.10 | Debugging in steps and at specific locations

Chrome Developer Tools: 3.10 | Debugging in steps and to specific locations

Detailed control of the debugging process.

To the text tutorial

Chrome Developer Tools: 3.11 | Console: Overview, simple code execution and output

Introduction to the console and its basic functions.

To the text tutorial

Chrome Developer Tools: 3.12 | Accessing DOM elements in the console

Manipulation of the DOM directly via the console.

To the text tutorial

Chrome Developer Tools: 3.13 | Snippets and time measurement in the console

Chrome Developer Tools: 3.13 | Snippets and Timing Measurement in the Console

Reusable code snippets and performance measurements.

To the text tutorial

Chrome Developer Tools: 3.14 | Grouping and styling the log outputs

Log outputs can be changed and grouped by color and font.

To the text tutorial

Chrome Developer Tools: 3.15 | More useful console methods

Some not very commonly used, but still useful console functions.

To the text tutorial

Network analysis and optimization

Chrome Developer Tools: 4.1 | Network: Overview of the features

Analysis of network requests and responses.

To the text tutorial

Chrome Developer Tools: 4.2 | Network: Throttling, Headers, and Preview

Simulation of slow network connections and examination of HTTP headers.

To the text tutorial

Performance and memory optimization

Chrome Developer Tools: 5.1 | Profiler - Inspect and optimize performance

Chrome Developer Tools: 5.1 | Profiler - Analyze and optimize performance

Identification of performance bottlenecks in JavaScript code.

To the text tutorial

Chrome Developer Tools: 5.2 | Optimize memory consumption with the Memory Profiler

Chrome Developer Tools: 5.2 | Optimizing memory consumption with the Memory Profiler

Analysis of memory consumption and identification of memory leaks.

To the text tutorial

Application tab and other tools

Chrome Developer Tools: 6.1 | Useful helpers and Rendering tab

More tools for performance optimization.

To the text tutorial

Chrome Developer Tools: 6.2 | Inspecting and adjusting animations

Chrome Developer Tools: 6.2 | Inspect and adjust animations

Detailed analysis of CSS animations and transitions. Optimization of performance through adjustment of timing functions and properties.

To the text tutorial

Chrome Developer Tools: 6.3 | Inspect web app resources using the Application tab

Chrome Developer Tools: 6.3 | Inspect web app resources with the Application tab

Investigation of the stored data of a web app such as Local Storage, Session Storage, and IndexedDB. Optimization of the memory management.

To the text tutorial

Chrome Developer Tools: 6.4 | Use extension React Dev Tools

Introduction to the React DevTools browser add-on. Inspecting the React component structure, Props, and State.

To the text tutorial

Settings

Chrome Developer Tools: 7 | The most important settings of the Chrome Dev Tools

Configuration of the DevTools for a more efficient workflow. Customization of themes, keyboard shortcuts, and other settings.

To the text tutorial

DevTools of other browsers

Chrome Developer Tools: 8.1 | The MS Edge DevTools

Very similar to the Chrome DevTools, but there are detail differences.

To the text tutorial

Chrome Developer Tools: 8.2 | The Firefox DevTools

Significant differences exist, but fundamentally very similar.

To the text tutorial

Chrome Developer Tools: 8.3 | The Safari DevTools

Partially larger differences from Chrome, but here the principle is the same.

To the text tutorial

Details of the content

Optimize your websites with the Chrome Developer Tools
A flawless website that loads super fast and looks great on every screen size?! To achieve this, you need to analyze and optimize the code of your pages. The Chrome Developer Tools are wonderful for this. With them, you uncover errors in your HTML, CSS, and JavaScript code. Additionally, you can closely examine the performance, code execution, and memory consumption. Use the insights to efficiently edit your pages and ultimately increase the visibility of your pages through debugging and optimization.
Learn how to effectively use the Chrome Developer Tools in this over-six-hour tutorial by software developer and trainer Stephan Haewß. Start with the basics of the Chrome DevTools and progress to advanced techniques for a clean, powerful presentation of your pages!

HTML, CSS, JavaScript – Debugging for clean, fast websites with optimized layouts

The course begins with an introduction to the Chrome Developer Tools, which are directly available in the browser. You will learn what the DevTools are and how to use them fundamentally. Following that, you will explore the Elements tab, which allows you to inspect and edit the styling, layout, and appearance of your pages. Using the Sources and Console sections, you will perform script debugging. Additionally, you will learn how to achieve network analysis as well as performance and memory optimization with the Chrome Developer Tools. Lastly, you will get an overview of the DevTools of other browsers. Overall, this course is suitable for all web developers who want to debug and optimize websites using Chrome's DevTools.

Applying Chrome DevTools effectively – Overview of the tutorial's contents

Introduction to Chrome DevTools: The course teaches you how to open the DevTools, navigate within them, and efficiently use the key features for editing and troubleshooting HTML, CSS, and JavaScript.
Debugging HTML and CSS: Learn how to inspect the DOM tree of a webpage, edit HTML and CSS directly in live mode, and promptly fix layout problems and CSS styling errors – ideal for quickly testing and adjusting the design before making permanent changes.
Debugging JavaScript: Discover how to load JavaScript files, set breakpoints, and step through the code. Variables and objects can be examined in real-time while the Call Stack facilitates tracing function calls – perfect for precise error tracking.
Using the Console: The console of the Chrome Development Tools allows for opening and analyzing logs, executing JavaScript code, and directly manipulating webpage elements. Through targeted logging, you can thoroughly analyze and optimize the code, greatly facilitating debugging and performance enhancement.
Performance optimization: Check network requests and loading times, monitor memory usage, and identify memory leaks. Efficiently improve loading speed and resource management through targeted optimization of JavaScript performance and detailed application performance analysis.
Advanced techniques: The Application panel of Chrome DevTools provides access to web storage like LocalStorage, IndexedDB, and Cache, as well as the management of Service Workers and Manifests. Additionally, extensions such as React DevTools can be integrated to debug reactive applications better. Customizable settings also offer optimal configuration of the DevTools for individual work requirements.