TL;DR CSS and JS code coverage  可以看 js 與 CSS 未使用的比例，程式碼行數旁邊也會有紅綠區隔。 Full-page screenshots  全版網頁截圖。 Block requests  隔離呼叫的檔案。例如某支CSS 檔，可以看少了這個檔案頁面呈現的情況。 Unified Command Menu  Command Menu ( Ctrl Shift P ) 的更新，這個可能看影片比較快。 *下文多次提到的  Command Menu 快捷鍵為 ctrl + shift + p CSS and JS code coverage 在 Command Menu 輸入 show coverage，然後按下開始 ( 圓形 icon ) ，過一段時間按下停止就可以了。 show coverage Full-page screenshots 這個功能讓長網頁截圖不再是件麻煩事，在 Command Menu 輸入 Capture full size screenshot ( 如下圖 )，Chrome 就會開始下載整個網頁的截圖了，不過不知為何它把此指令分類為 mobile。 Full-page screenshots Block requests 切到 Network 介面，在想要阻檔的檔案上按右鍵選擇 Block request URL ，之後重整頁面就可以了。 Block requests 來源為  Google developers  4 月份的文章。

<picture> 是 HTML5 包覆圖片用的 tag。可以搭配  source  來因應不同情況下（解析度、寬度），甚至是相容性（webp、jpeg、svg、png……）來顯示的圖片。 現況 基本上所有的瀏覽器都支援此 HTML5 的 tag，除了 IE ( Edge )系列要更新到 Edge 13 之後的版本才能使用。不過就算不支援也只是回到原先的  img  而已，沒有什麼大礙。 各大瀏覽器對於 picture 的相容性 ( caniuse.com ) - 於 2017 年 6 月 使用方法 不同的圖片類型： <source srcset="img/text.avif" type="image/avif"> <source srcset="img/text.webp" type="image/webp"> 不同瀏覽器寬度： <source media="(min-width: 768px)" srcset="text-768.jpg"> <source media="(min-width: 360px)" srcset="text-360.jpg"> picture 會由上到下找尋吻合瀏覽器現況的 source 值，若第一個 source 值不符合使用的瀏覽器的支援度，才會去找第二個、第三個……，以此類推，都不適用才會直接套用原本寫在 img 的圖片。 實例 <picture> <source media="(min-width: 1440px)" srcset="https://api.fnkr.net/testimg/1920x400/9a91f2/FFF/?text=min-width-1440px"> <source media="(min-width: 768px)" srcset="https://api.fnkr.net/testimg/1440x300/c7254e/FFF/?text=m