|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/learn-how-to-use-chrome-developer-tools/
课程评论：没有评论
课程名称：学习如何使用 Chrome 开发者工具 课程概述：Chrome 开发者工具（简称 DevTools）是内嵌于 Google Chrome 浏览器的一套网页创作和调试工具。DevTools 为网页开发者提供了深入访问浏览器及其网页应用的内部机制的能力。通过使用开发者工具，开发者能够有效地追踪布局问题、设置 JavaScript 断点，并获取代码优化的相关见解。每位网页开发者都应该学习如何使用 Chrome 开发者工具，以帮助排查网页应用问题并提升其性能。所有主要浏览器都包含开发者工具，使开发者能够检查网页或应用的代码，并进行测试和评估与该代码相关的指标。 本课程将指导您探索 Chrome 开发者工具中的各种工具，为您的日常工作扩展工具箱。课程将涵盖 Chrome 开发者工具中最常用的面板，包括控制台、元素面板和网络面板。您将学习修复与 JavaScript 相关的错误的基本工作流程。课程内容包括： - 设置测试和调试环境 - 如何访问 Chrome 开发者工具 - 安装本地实时服务器 - 调试 JavaScript 代码 - 使用元素面板 - 使用控制台 - 使用和探索网络面板 - 模拟移动设备 - 实时编辑 DOM 元素 - 设置持久性工作区 - 在源面板中打开源文件 - 编辑盒模型 完成本课程后，您将掌握基本技能，能够探索并使用 Chrome 开发者工具。
The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome. The DevTools provide web developers deep access into the internals of the browser and their web application. You can Use the DevTools to efficiently track down layout issues, set JavaScript breakpoints, and get insights for code optimization. Every web developer should learn how to use the chrome developer tools to help troubleshoot web app issues and improve the performance of their web apps. All major browsers include developer tools, which enable developers to examine the code of a webpage or app, as well as run tests and evaluate metrics related to that code. Chrome Developer Tools (DevTools for short) is the industry standard. This course will show you how to explore the various tools within the chrome developer tools and equip you with an expanded toolbox for your day-to-day work. We will explore the most commonly used panels within the chrome devtools , including the Console, Elements panel, and Network panel. You learn the basic workflow to fix JavaScript related bugs. Topics include:Setting up your testing and debugging environmentHow to access the chrome devtoolsInstalling Live local serverDebugging JavaScript codeWorking with the Elements PanelWorking with the ConsoleUsing and exploring the Network PanelEmulating mobile devicesLive editing of the DOM elementsSetting up Persistence WorkspaceOpening source files in the Sources panelEditing the BOX-Model After completing this course you will have the basic skills to explore and use the chrome devtools.
