掌握 Google Chrome 开发者工具课程
学习如何使用 DevTools，包括性能工具、Lighthouse、无障碍功能等众多工具。
更新于 2024 年 9 月
语言 - 西班牙语
讲座 -60
时长 -2.5 小时
终身访问
课程 描述
您是否知道可以使用 Google Chrome DevTools 分析网站的性能？
或者，是否可以模拟视觉障碍来创建无障碍网站？
如果您对以上任何问题的回答是否定的，则可能是因为您只在表面上了解和使用过 Google Chrome DevTools。
DevTools 是一套强大的工具，可帮助开发人员构建更好的网站。
之所以能够做到这一点，是因为 DevTools 包含用于调试代码、检查网站元素、运行 JavaScript 代码以进行测试、查找性能问题、样式问题、可访问性问题等的工具。
在本课程中，您将学习如何使用 DevTools 的主要工具，从允许与页面 DOM 树交互的工具，到允许通过图表和建议来检测性能和可用性问题，从而提供更好的用户体验的工具。
在本课程结束时，您将了解如何使用以及在哪里找到主要的 DevTools 来改进您的应用程序和网站。
本课程将介绍的一些主题包括：
与 DOM 树元素交互的工具。
控制台的使用。
使用 Sources 面板与源代码交互。
使用 Network 面板可视化网络元素。
用于改进性能和查找性能瓶颈的工具。
用于查找渲染问题的工具。
以及其他许多主题。
为了充分利用本课程，建议您具备 HTML、CSS 和 Javascript 的基础知识。
您还在等什么？快来创建更好的应用程序和网站吧！我们在课程中见！
本课程适合谁
- 想要学习如何使用 Chrome DevTools 的开发人员
- 想要提高调试技能的开发人员
- 想要解决其网站问题的开发人员
- 想要了解 Chrome DevTools 最新功能的开发人员
目标
了解 Chrome DevTools 的主要工具。
了解在哪些情况下使用 DevTools 面板。
如何使用 DevTools 调试 JavaScript 代码。
检查和修改 DOM。
检查和修改 CSS。
优化网站性能。
先决条件
HTML 基础知识
CSS 基础知识
JavaScript 基础知识
课程大纲
查看课程内容的详细分解。
简介
3 节课
-
打开 Chrome DevTools 02:23 02:23 -
命令和键盘快捷键 01:40 01:40
-
Chrome DevTools：概览 03:57 03:57
使用设备模式模拟设备
2 节课
控制台
4 节课
网络
2 节课
记忆
4 节课
灯塔
13 节课
渲染器
3 节课
远程调试
2 节课
设置和个性化
1 讲座
讲师 信息
HECTOR URIEL PEREZ ROJAS
课程 证书
使用您的证书来改变职业生涯或在您目前的职业生涯中提升自己。
我们的学生与
最佳
相关视频课程
查看更多
