|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/chrome-devtools-da-zero-ad-esperto/
课程评论：没有评论
**课程名称：** Chrome DevTools: 从零到专家 [2025年课程] **课程概述：** 本课程将深入讲解Google Chrome开发者工具（DevTools）的各项功能，帮助您分析、调试和优化应用程序代码。 * **Elements（元素）面板：** 学习对HTML和CSS代码进行各种操作，包括隐藏、移除、复制、复制、修改属性等。 * **Console（控制台）面板：** 重点掌握JavaScript开发者最重要的工具之一。 * **Sources（源代码）面板：** 学习查看和实时修改文件内容，并进行专业的JavaScript代码调试，告别零散的 `console.log()`。 * **Network（网络）面板：** 检查客户端与服务器之间的网络活动。 * **Lighthouse（灯塔）面板：** 分析网页的性能、可访问性、最佳实践和SEO，并获取改进建议。 课程中将通过开发小应用程序来辅助讲解各个DevTools面板。还将构建一个简单的Node.js Web服务器，以理解浏览器在渲染阻塞资源时的行为。本课程不仅限于工具的表面探索，更侧重于实际应用。
In questo corso studieremo gli strumenti messi a disposizione dai DevTools di Google Chrome per analizzare, effettuare il debug e migliorare il codice delle nostre applicazioni.Inizieremo studiando la scheda Elements che ci permette di fare tutte le operazioni che vogliamo sul codice HTML e CSS, come nascondere o rimuovere elementi, copiarli o duplicarli, modificare gli attributi ecc.Passeremo subito dopo ad analizzare la scheda Console, molto cara a noi programmatori JavaScript.Proseguiremo poi con la scheda Sources (Sorgenti) che ci permette di visualizzare il contenuto dei file, ma anche modificarli al volo. Inoltre possiamo effettuare il debug del codice JavaScript, in modo professionale, evitando i classici console.log() sparsi nel nostro codice.Non poteva mancare l'analisi della scheda Network, per ispezionare le attività di rete che avvengono tra client e server.Infine, studieremo la scheda Lighthouse per analizzare e avere suggerimenti su come migliorare perfomance, accessibilità, best practices e SEO delle nostre pagine web.Durante il corso svilupperemo piccoli applicativi, laddove necessari allo studio delle varie schede dei DevTools.Creeremo anche un piccolo web server con Node per capire il comportamento del browser in caso di risorse bloccanti del rendering.Il corso quindi non si limita ad una mera esplorazione dei vari strumenti dei DevTools.
