|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/maitrisez-la-console-et-ses-outils/
课程评论：没有评论
课程名称: 掌握控制台及其工具！ 课程概述: 本课程将带您深入了解控制台和开发者工具（DevTools）。许多开发者在使用 Chrome、Firefox 等浏览器时，仅仅依赖“控制台”标签，而实际上浏览器提供的工具箱中充满了强大的功能。让我们一起探索这些功能： 1. **检查网站的 DOM**：DOM（文档对象模型）是网站的树状对象表示，由 HTML、CSS 和 JavaScript 文件生成。我们将通过 DevTools 的“元素”面板观察和修改 DOM。 2. **调试 JavaScript**：除了使用 "console.log()"，我们可以利用源代码面板中的强大调试工具来调试 JavaScript。 3. **即时修改 CSS**：借助“元素”面板，我们可以分析应用于每个元素的 CSS，并对其进行各种更改。 4. **改善网站性能**：性能面板将帮助我们检测网站加载或动画时的任何问题。 5. **管理 JavaScript 内存**：内存问题是常见的错误来源。我们将利用“内存”标签解决内存泄漏问题。 6. **进行全面网站审计**：DevTools 提供“Lighthouse”标签（原名“审计”），可以对网站进行大量测试，并提供改进 SEO、性能和可访问性的建议。 7. **网络监控**：网络面板使我们能够查看网站加载过程中发生的文件、图像及 API 调用情况。 还有更多功能等待您来探索！我们将在课程中见面，一起开始这段旅程。
C'est parti pour le cours sur la console et les DevTools!Trop de développeurs se contentent d'utiliser l'onglet "Console" lorsqu'ils codent avec Chrome/Firefox/etc...Alors que les navigateurs proposent des boîte à outils regorgeant de fonctionnalités géniales.Découvrons-les ensemble.1. Inspecter le DOM de notre siteLe DOM, Document Object Model, est la représentation d'un site sous la forme d'un arbre d'objets, créés à partir des fichiers fournis, tel que l'HTML, le CSS et le JavaScript.Nous allons pouvoir l'observer et le modifier grâce aux DevTools et au panneau "Elements".2. Debugger notre JavaScriptIl n'y a pas que la méthode "console.log()" qui peut nous aider à débugger notre JS, le panneau source nous donne accès à de puissants outils de deboggage.3. Changer le CSS à la voléeToujours grâce au panneau "Elements", nous allons pouvoir analyser le CSS appliqué à chaque élément, et effectuer toutes sortes de changements sur ces derniers.4. Améliorer les performances de nos sitesLe bien nommé panneau "Performances" va nous permettre de détecter s'il y a quelque chose qui cloche lors du chargement ou des animations d'un site.5. S'occuper de la mémoire en JSAutre source de problèmes courants, la mémoire!On va pouvoir mettre fin aux memory leaks grâce à l'onglet "Memory"6. Faire un Audits complet d'un site.Les devtools nous donnent accès à l'onglet "Lighthouse"(anciennement "audit"), qui nous permet tout simplement de faire passer des tonnes de test à un site.S'ensuit une série de conseils afin d'améliorer notre création au niveau du SEO, des performances, de l'accéssibilité, etc...7. Le réseau Le panneau "network" nous permet de voir ce qui se passe au chargement d'un site, au niveau des fichiers, des images, ou lors d'appels vers des APIs.Et bien d'autres choses encore!On se donne rendez-vous de l'autre côté pour commencer tout ça.
