【Udemy中英字幕】Mastering Chrome Developer Tools for Beginners

初学者掌握 Chrome 开发者工具

解锁 Web 开发：Chrome DevTools 入门指南

讲师：Skill Tree

双语IT资源独家Udemy付费课程，独家中英文字幕，配套资料齐全！

用不到1/10的价格，即可享受同样的高品质课程，且可以完全拥有，随时随地都可以任意观看和分享。

您将学到什么

了解 Chrome 开发者工具的结构和组件
模拟移动设备进行响应式设计测试
使用元素面板操作 DOM
在 DevTools 中实现持久性
编辑并检查 CSS 盒子模型
掌握控制台面板的使用
分析网络活动以优化性能
使用高级技术调试 JavaScript
高效重现和修复错误
优化 Web 应用程序性能
应用断点进行代码分析
直接在 DevTools 中实施修复
了解 Chrome DevTools 界面
实时检查和修改 HTML/CSS
有效调试 JavaScript 代码
分析网络性能
利用控制台进行 JavaScript 开发
管理应用程序数据

探索相关主题

要求

对 Web 开发的基本了解
熟悉 Google Chrome 浏览器
访问安装了 Google Chrome 的计算机
愿意学习和尝试

描述

Chrome 开发者工具 (DevTools) 是一套直接内置于 Google Chrome 浏览器中的 Web 开发者工具，让开发者能够深入访问其 Web 应用程序的内部结构以及 Web 本身。

本课程专为希望充分利用 Google Chrome 开发者工具的 Web 开发者和设计人员而设计。本课程将帮助学员改进 Web 开发工作流程，调试和优化代码，并创建更高效的 Web 应用程序。

在整个课程中，学员将踏上一段全面的旅程，首先了解 Chrome 开发者工具中的各种面板和选项。学员将获得模拟移动设备的实践经验，从而可以直接在浏览器中进行响应式设计测试。课程将深入探讨使用 Element Panel 的细微差别，教导学员如何实时操作 DOM 和设置元素样式，从而加深对网页渲染过程的理解。

在 DevTools 中设置持久性是另一项关键技能，确保在调试会话期间所做的更改能够保留。课程还提供了编辑和检查盒模型的深入见解，使参与者能够精确地调整布局和设计。

本课程的一部分内容致力于掌握 JavaScript 调试技巧。学习者将遵循结构化的方法来识别和修复错误，从重现问题到应用最终修复。此过程包括使用断点暂停代码执行、单步执行代码以了解其执行流程、设置其他断点进行更仔细的检查、检查变量值以识别差异，以及最终应用必要的修正。

此外，本课程还涵盖了如何使用控制台在当前页面上下文中执行 JavaScript，并探索了“网络”面板如何分析和优化加载时间和资源请求。课程还探讨了其他 DevTools 面板，帮助学员全面了解 Web 开发者可用的各种工具。

课程结束时，参与者将掌握 Chrome DevTools，从而能够高效地调试、优化性能并交付高质量的 Web 应用程序。