|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/devtools-course/
课程评论：没有评论
**课程名称：Chrome DevTools 网络开发者指南** **课程概述：** 本课程是为网络开发者设计的，旨在教授如何利用 Chrome DevTools 提升调试能力、自定义网页外观以及掌握常用的快捷键。您将获得一本免费电子书 PDF 指南，并有机会通过网络寻宝等方式挑战和练习所学技能。本课程是探索 Chrome DevTools 功能和应用价值的绝佳选择。 **Chrome DevTools 简介：** Chrome DevTools 是谷歌 Chrome 浏览器内置的一套强大的网络开发者工具。它能帮助您实时编辑页面、快速诊断问题、测试和尝试代码、编写代码片段、检查代码、以及测试响应式设计。最终目标是帮助您更快地构建更优质的网站。大多数浏览器都提供其自身的开发者工具。 **课程内容：** * **打开 Chrome DevTools：** 学习多种打开 DevTools 的方法，以满足不同用户的需求。 * **Elements 面板：** 学习如何在该面板中计算和获取盒模型（box model）的详细信息。 * **Console 面板与 JavaScript 编程：** 掌握 Console 的使用，以及如何在其中运行和保存代码片段。 * **Access local filesystem with DevTools：** 了解如何使用 DevTools 访问本地文件系统。 * **Network 面板：** 学习如何分析文件加载时间并进行网络调试。 * **Application 面板：** 探索 Session 和 Local Storage 的值。 * **Audit 面板：** 学习如何获取网站改进报告。 * **快捷键与获取更多帮助：** 掌握常用的快捷键，并了解如何获取更多帮助资源。 **讲师：** 讲师拥有超过 20 年的网络开发经验，将全程指导您学习 Chrome DevTools。 **课程特色：** * 免费电子书 PDF 指南。 * “网络寻宝”等课程挑战。 * 每节课都包含练习，帮助您实践和提升技能。 **课程目标：** 帮助开发者更高效地利用 Chrome DevTools 来优化网站开发流程。
Learn how use Chrome DevTools improve on Debugging, Customize look and feel and learn some shortcuts for Web development.BONUS - Free eBook PDF guide for lessons2 Web scavenger hunt lesson challengesExercise in each lesson to practice and challenge your skillsPerfect course to explore more about what Chrome DevTools has to offer and how you can use devTools for development.Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. DevTools Help you edit pages on-the-fly Diagnose problems quicklyTest and try codeWrite code snippetsInspect CodeCheck responsiveness DevTools ultimately helps you build better websites, faster. Most browsers have their own version of devtools.Course coversOpen DevToolsElement PanelWhere to compute and get box model detailsusing the Console and JavaScript codingSnippets of code running and saved in the consoleAccess local filesystem with DevTOolsNetwork for file load times and debuggingApplication tab for session and local storage valuesAudit Panel and how to get website improvement reportShortcuts and getting more help with DevToolsTaught by an instructor with over 20 years of web development experience ready to help you learn about DevToolsChrome DevToolsChrome DevTools is a set of web developer tools built directly into the Google Chrome browser. DevTools can help you edit pages on-the-fly and diagnose problems quickly, which ultimately helps you build better websites, faster.Open DevToolsThere are many ways to open DevTools, because different users want quick access to different parts of the DevTools UI.When you want to work with the DOM or CSS, right-click an element on the page and select Inspect to jump into the Elements panel. Or press Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, Chrome OS).When you want to see logged messages or run JavaScript, press Command+Option+J (Mac) or Control+Shift+J (Windows, Linux, Chrome OS) to jump straight into the Console panel.
