|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/chrome-devtools-verstehen-und-verwenden/
课程评论：没有评论
课程名称：理解和使用Chrome开发者工具 概述：理想情况下，网页开发者可以无错误地编写出最高效的代码和最佳的HTML/CSS。然而在现实中，大多数人常常需要对自己费尽心思编写的JavaScript代码进行调试，同时优化和纠正HTML结构及CSS样式。幸运的是，我们有一个工具，即Chrome开发者工具（DevTools），很多人或多或少都听说过并使用过。本课程将教你有效使用DevTools，以调试和优化你的网络应用。Chrome DevTools提供了多种功能，可以帮助你发现错误、提升网站性能、优化用户体验及外观。这些功能也可较为直接地适用于Edge DevTools，且Firefox和Safari的开发者工具中也有类似的概念，因此你可以利用本课程理解Web应用/Web页面调试的基本概念，从而在其他浏览器中运用DevTools。 课程内容： - Chrome DevTools简介： - 什么是Chrome DevTools？ - 如何打开Chrome DevTools？ - 主要功能概述 - HTML和CSS调试： - DOM树的检查 - 实时模式下编辑HTML和CSS - CSS样式调试 - 布局问题修复 - JavaScript调试： - 加载和执行JavaScript文件 - 设置断点 - 逐步执行JavaScript代码 - 检查变量和对象 - 导航调用栈 - 使用控制台 - 性能优化： - 分析网络请求及相关错误 - 分析页面加载时间 - 监控内存使用 - 识别内存泄漏 - 优化JavaScript性能 - 分析应用性能 - 高级技术： - 使用Application面板检查Web应用和Web存储（LocalStorage, Indexed DB, 缓存、清单、Service Worker） - 安装和使用DevTools的React扩展 - 进行DevTools优化设置 本课程将帮助学员掌握Chrome开发者工具的各项技能，提高网页开发的效率与质量。
In einer idealen Welt macht ein Webentwickler keine Fehler und schreibt den effizientesten Code und das beste HTML/CSS direkt im ersten Versuch. Bis wir diese Welt entdeckt haben, müssen allerdings die meisten von uns (mal mehr mal weniger) unseren mühevoll geschriebenen JavaScript-Code auf Fehler untersuchen und unsere HTML-Strukturen und CSS-Styles optimieren und korrigieren. Zum Glück gibt es ein Hilfsmittel, von dem wahrscheinlich jeder schon mindestens einmal gehört und die meisten auch schon verwendet haben: die Chrome Developer Tools (DevTools). In diesem Kurs lernst du, die DevTools effektiv zu nutzen, um deine Webanwendungen zu debuggen und zu optimieren. Die Chrome DevTools bieten eine Vielzahl von Funktionen, die dir dabei helfen können, Fehler zu finden, die Performance deiner Website zu verbessern und die Benutzerfreundlichkeit und das Aussehen zu optimieren. Sehr viele Funktionen lassen auch mehr oder weniger 1 zu 1 auf die Edge DevTools übertragen und viele Konzepte sind so oder so ähnlich auch in den Entwicklerwerkzeugen von Firefox und Safari verfügbar, so dass du den Kurs auch nutzen kannst, um die Konzepte hinter dem Debugging von Webanwendungen/Webseiten allgemein zu verstehen und somit mit diesem Wissen auch die DevTools der anderen Browser verwenden kannst. Kursinhalte:Einführung in die Chrome DevTools:Was sind die Chrome DevTools?Wie öffnest du die Chrome DevTools?Überblick über die wichtigsten FunktionenNavigation in den DevToolsDebugging von HTML und CSS:Untersuchung des DOM-BaumsBearbeiten von HTML und CSS im Live-ModusDebuggen von CSS-StylingBeheben von Layout-ProblemenDebugging von JavaScript:Laden und Ausführen von JavaScript-DateienSetzen von Breakpoints und HaltepunktenSchrittweises Durchlaufen von JavaScript-CodeUntersuchung von Variablen und ObjektenNavigieren im CallStackVerwendung der KonsoleKonsole öffnen und zur Analyse von Logs nutzenJavaScript-Code in der Konsole ausführenKonsole nutzen, um Elemente auf der Webseite zu manipulierenLogausgaben nutzen, um Code zu analysieren und zu optimierenOptimierung der Performance:Analyse von Netzwerkrequests und dabei entstehenden FehlernAnalyse der SeitenladezeitÜberwachung der SpeichernutzungIdentifizierung von SpeicherlecksOptimierung der JavaScript-LeistungAnalyse der AnwendungsperformanceFortgeschrittene Techniken:Das Application-Panel zur Untersuchung von Webanwendungen und Webspeicher (LocalStorage, Indexed DB, Cache, Manifest, Service Worker) verwenden.React-Erweiterung für die DevTools installieren und nutzenSettings zur optimalen Einrichtung der DevTools nutzen
