学海无涯苦作舟的博客

概览Web Vitals 是由Google 分析大量使用者资料后，用来量化网站使用者体验的指标，藉由测量Web Vitals 分数让开发者能更有方向的优化网站体验，尤其是Core Web Vitals。Core Web VitalsCore Web Vitals 是由Google 定期选出，在三种不同面相中最具代表性的使用者体验指标，而目前的Core Web Vitals 分别是：Largest Contentful Paint (LCP) – 载入速度First Input Delay (FID

前端可不是功能需求都完成了就完事，Load 超慢、动画卡卡的、点击按钮过了一秒才有反应等等都会让使用者默默在心中给网站体验扣分，尤其是第一次浏览时更可能直接关掉。概览一般来说想要进行网页优化最简单有效的方式是从Lighthouse 开始，Lighthouse 会以网页效能指标为目前的页面打分数，同时给出优化的建议方向，开发者可以透过提升分数逐步优化网页的效能。而Performance 面板则为更深入的效能测量工具，通常会在针对特定功能进行优化或是像制作网页游戏，每一个Function 的效能都必须斟酌

概览网页使用体验和网路有着非常大的关系，而Network 面板就是协助开发者分析网路问题的工具。本篇文章将会说明如何以Network 面板来观察各种资讯，以及关于请求的的重要观念解析。Network Log Detail在Network log 列表中点击任意一列Request 会从右侧展开该Request 的详细资讯面板，且根据Request 的内容会有不同的分页。HeadersGeneral包含了Request的基本资讯如URL、Request method、Status code、Remo

概览无论是在开发简单的网站，检查一个Request 是否成功发送并收到预期的Response，还是从Network log 的时间线来分析网站效能问题，每次打开Network log 列表时，总会有一个明确的目标，此时用肉眼从所有Network log 中寻找特定的几条就非常没有效率，尤其网页较为复杂又有一堆广告、追踪码参杂时，完全是大海捞针。本篇文章将会说明如何利用Network 面板的Filter、Search 功能快速的从Network log 海中萃取出想要分析的目标。过滤（Filter）F

Network 面板详细记录着每个请求、回应的结果，除了用来检查单次的请求是否完成，更好用的是对所有请求的搜寻、过滤、分析，以及客制化的介面。概览Network 面板主要由上方的工具列和下方的Network log 组成，预设会开启中间的Overview，将各个请求的时间关系以视觉化的方式呈现。在面板Overview中可以看到DOMContentLoaded和load事件触发的时间线，分别以蓝色和橘（红）色标示，下方的资讯列则会显示请求的总数、实际网路传输量、所有资源的大小以及总花费时间。一般来说

使用JavaScript Debugger 的精髓除了断点、逐步执行外，还有各种列表显示JavaScript 目前的执行状态，以及一些关于Debugger 的设定。阅读本篇文章时建议搭配Demo页面Sources - JavaScript Debugging，效果更佳。状态列表Watch执行程式码的过程中，若需要不断查看某个变数的值，可以在Watch 列表中新增一条Expression。加入后每次暂停或逐步执行都会重新执行Watch中的Expression，另外也可以手动按下右方的Refresh

利用断点暂停程式码后，就能控制程式码的执行来进行更进一步的Debug，笔者会在本篇文章介绍如何在Sources 面板中进行JavaScript Debugging。概览使用Sources 面板进行Debug 的流程大致上可分为以下四个步骤重现问题-- 找出产生Bug 的流程，例如只要照着A、B 的顺序点击按钮就会出现问题。建立断点-- 确定Bug 的产生方式后，选择适当的断点来快速找到问题程式码的位置。控制执行-- 暂停程式码后，利用跳跃、逐步执行等方式控制程式码的进行，观察执行流程是否符合预期。

此篇文章将说明如何透过Sources 面板建立断点来暂停JavaScript 的执行，除了手动标记行号以外，还有非常多种方式，适用不同的情境。注意重整页面不会影响以建立的断点，这也是断点的一大核心机制概览最常见的断点建立方式就是标记特定一行程式码，但面对各种不同Debug 情境，尤其是程式码非常多时，可能无法一下就找到精确的档案或位置，此时直接标记的方式就显得没有效率。本篇文章中笔者将会介绍Sources 面板的右侧子面板中关于各种断点的建立方式以及使用时机，断点主要有分为：标记– 执行到程式码特

概览今天的主角是Sources 面板的Workspace 功能，主要提供当前页面中各个Context 的资源浏览和修改，上方可以看到五个页签，分别是：PageFilesystemOverridesContent scriptsSnippets本篇文章将会走个页签的功能，推荐开启Demo网站Sources - Workspace实际操作一遍来理解应用流程情境，阅读本篇文章前建议先了解Source map的观念，可以参考Sources - Source Map & File Editing

终于来到了重头戏Sources 面板，前面的文章提到了许多提高Debug 效率的小撇步，但如果遇到了更加复杂的情境，透过Console、Elements 面板都无法解决，此时就是Sources 面板的出场时机。阅读本篇文章时建议搭配Demo页面Sources - Source Map & File Editing，效果更佳。概览打开Sources 面板后可以看到主要分成左中右三个面板，左侧面板主要和当前页面的资源相关，在面板中会看到已载入的资源如HTML、CSS、JS 等等档案以资料夹的型式呈

Run JavaScript今天的文章是Console 系列的最后一篇，笔者会讲解在Console 中有关JavaScript 执行的功能，还有一些在Console 输入JavaScript 的小眉角，来提升输入的效率。换行、缩排刚开始在Console 内输入多行程式码的时候觉得非常不方便，要不是需要一直手动缩排，不然就是还没打完不小心就执行喷错了，不过在了解Console 的换行和缩排原理后，输入效率简直提升一个档次。一般来说输入JavaScript时按下Enter会直接执行，按下Shift+En

除了可以在JavaScript 执行的Console API 外，Console 还提供了一些Debug 专用的Function，每一个都身怀绝技。阅读本篇文章时建议搭配Demo页面Console - Utilities，效果更佳。Console Utility Functions还记得笔者第一次看到这些Function时特别兴奋，直接写在自己的程式码中，想当然是跳出了各种Uncaught ReferenceError: xxx is not defined。$_会储存的执行结果，在Consol

Debug JavsScript的时候最简单直觉的方式就是console.log，不过除了log以外，Console API其实还有非常多好用的Method，来看看Console家族中有哪些厉害的成员吧。Console API大部分的时候console.log都能解决问题，不过用对Method可以省去更多时间。console.assert它的作用和console.log差不多，最大的差别是当第一个参数是falsy时才会作用。[false, null, undefined, 0, -0, 0n, N

完全掌握Console 面板，从认识Console message 开始。概览Console 面板做为网页开发者的Debug 神器，在许多网站开启DevTools 时甚至都能看到Debug 专用的log，不过在讲解Console 面板的功能之前，得先讲讲Console message。建议阅读本文时可以搭配Demo页面Console - Message一起使用，效果更佳。Console Message LevelConsole message 有分成四种Level：VerboseInfoWa

概览今天的文章主要会提到笔者在浏览、操作DOM 结构时常用到或觉得不可不知的功能，虽然大部分的功能都很简单或有很多种达成的方式，不过笔者的确因此省了不少时间呢，马上就来看看有什么新奇的玩意儿吧！阅读文章时建议搭配Demo页面Elements - DOM一起使用，效果更佳。DOM$0有注意到开启Elements面板时，标记的元素后方总会有个== $0吗？先Inspect一个元素后再到Console面板输入$0，会发现刚刚选中的元素出现在Console中！其实点选某个元素的时候，后方的== $0就说

概览上一篇文章主要讲解了Elements面板中设定CSS的部分，今天笔者将会继续说明CSS相关功能，包括Styles分页上方的小工具列以及Computed分页的应用。阅读本篇文章时建议搭配此Demo页面Elements - CSS 2一起使用，效果更佳。状态锁定有时会在CSS中定义Pseudo class如:hover、:active，在使用者与页面互动时改变样式，不过定义在Pseudo class的Styles在Debug时无法直接用JavaScript触发，如果有一个滑鼠经过才会出现的选单就必须

想要又快又稳的满足各种UI 需求，每天肯定花不少时间在Debug CSS，不过总有某些特殊情境让Debug 过程非常繁琐，甚至是难以完成，此时心中就会逐渐冒起一把无名火。概览Elements 面板会显示目前网页中的DOM、CSS 状态，且可以修改页面上的DOM 和CSS，即时看到结果，省去了在编辑器修改、储存、浏览器查看结果的流程。Elements 主要可以分为DOM 结构以及元素（Element）内容两个子面板，接下来笔者将会从右侧面板，也就是元素内容面板的CSS Debugging 相关功能开始讲

相信Debug 是开发者每天必经的过程，能否顺利Debug 决定了开发者一整天的心情，即使如此却较少看到开发者着墨在Debug 技巧上，因此接下来的30 天中，我将会介绍各种前端Debug 技巧，还有我常用的小技巧，解救那些时常陷于Debug 之苦却难以脱身的网页开发者们。缘起一切的开始，就在第一次面试实习机会时，主考官问我：「你都怎么Debug？」我一时竟然只能想出一个答案：「开DevTools 看console.log。」那时候我的Debug原则就是「如果一个console.log 找不出问题，就.

身为一个网页开发者，肯定对Chrome DevTools 不陌生，虽然每天都会用到，可能都是不断重复使用某些功能而已，如果现在让读者为自己打个「对Chrome DevTools 的了解程度」，会给自己几分呢？Chrome DevTools 简介大家熟知的Chrome DevTools 主要由几个面板(Panel) 组成，例如Elements、Console、Sources 等等，另外在DevTools 开启时按下ESC 可以打开drawer，里面也藏了不少好用的功能，最常用到的情境就是想在开启Netwo