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、jpg、svg、png……）來顯示的圖片。 現況 基本上所有的瀏覽器都支援此 HTML5 的 tag，除了 IE ( Edge )系列要更新到 Edge 13 之後的版本才能使用。不過就算不支援也只是回到原先的 img 而已，沒有什麼大礙。 使用方法 不同的圖片類型： <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=min-width-992px"> <img src="https:/...

HTML如下： <section class= "box" >      <div class= "boALL" > </div> <!-- all borders --> <div class= "boTop" ></div> <!-- 上 --> <div class= "boRight" ></div> <!-- 右 --> <div class= "boBottom" ></div> <!-- 下 --> <div class= "boLeft" ></div> <!-- 左 -->      <a href= "javascript: void(0)" class= "txt" > HOVER HERE </a> </section> css setting： .box {    display: inline-block ;    width: 200px ;    height: 60px ; background-color: #999 ;    position: absolute ;    left: 0 ;    right: 0 ;    top: 0 ;    bottom: 0 ;    margin: auto ; text-align: center ; line-height: 60px ;    transition: background-color .7s ; } .box:hover { background-color: #...

HTML架構如下(html structure)： <div class=" clock ">     <div class=" centerDot "></div>     <div class=" secHand "></div>     <div class=" minuHand "></div>     <div class=" hourHand "></div>     <div class=" number1 number ">1</div>     <div class=" number2 number ">2</div>     <div class=" number3 number ">3</div>     <div class=" number4 number ">4</div>     <div class=" number5 number ">5</div>     <div class=" number6 number ">6</div>     <div class=" number7 number ">7</div>     <div class=" number8 number ">8</div>     <div class=" number9 number ">9</div>     <div class=" number10 number ">10</div>     <div class=" number11 number "...

fade slide show 從Jonathan Snook 的網站得知可以用appendTo()去控制，幫我省去了一些多餘的css()定位和addClass / removeClass 。 但其實原本的寫法會讓appendTo和fadeOut同時執行，導致看不到fadeOut的效果，所以再改寫成讓appendTo塞進fadeOut裡面，讓fadeOut之後再appendTo。 html架構如下： 每個 li 各自都有不同的background-image jQuery語法如下： element的變化如下：