Sizzy 是一款專為程序員/設(shè)計(jì)師準(zhǔn)備的 WEB 頁面調(diào)試伴侶軟件，工作者可以不用準(zhǔn)備那么多實(shí)體設(shè)備，只需要打開?Sizzy 就能看到你的網(wǎng)頁在移動(dòng)端、桌面端、平板端的顯示效果，支持快速檢查網(wǎng)頁元素（幫助你快速排查網(wǎng)頁障礙）、各終端同步滾動(dòng)顯示效果、終端頁面截圖、橫豎屏效果查看等功能。
首先你看到下面這個(gè)清爽的主界面時(shí)是我自己選擇的個(gè)性化皮膚，Sizzy 是支持皮膚自設(shè)定的，你可以加入常用的設(shè)備終端，這樣就可以看到網(wǎng)頁在這些設(shè)備上的最終效果，而且可以通過滑動(dòng)“設(shè)備屏幕”對整個(gè)頁面進(jìn)行預(yù)覽，省去了找實(shí)體設(shè)備的麻煩，在左側(cè)的工具欄上可以對各種設(shè)備平臺進(jìn)行篩選顯示，你還可以對網(wǎng)頁緩存，cookies 進(jìn)行清除，或者對網(wǎng)頁在線狀態(tài)進(jìn)行開關(guān)、開關(guān)緩存模式，對設(shè)備進(jìn)行橫豎屏顯示切換以及截圖。
Sizzy 的瀏覽模式選擇
在查看網(wǎng)頁在各終端的效果時(shí)，有三種模式可選，分別是默認(rèn)模式，也就是所有設(shè)備截圖都在一個(gè)主界面里顯示，其次是 focus 模式，各終端的切換被整合在頂部的 toolbar 上，界面里只有一個(gè)終端的界面預(yù)覽，最后是水平式滑動(dòng)預(yù)覽，所有終端預(yù)覽都在一個(gè)滑動(dòng)欄中，使用手勢滑動(dòng)即可進(jìn)行切換。
如何開始使用?Sizzy
啟動(dòng) Sizzy 后輸入網(wǎng)頁地址就能進(jìn)行預(yù)覽任務(wù)，這個(gè)地址可以是域名也可以是你的本地項(xiàng)目鏈接。
Sizzy 縱覽演示視頻
WEB 預(yù)覽
在單個(gè)設(shè)備預(yù)覽上，調(diào)用隱藏菜單可以選擇只看（focus）這個(gè)終端的預(yù)覽效果，調(diào)用開發(fā)工具，切到離線模式，截取整個(gè)網(wǎng)頁截圖（移動(dòng)設(shè)備支持滾動(dòng)截圖），克隆一個(gè)新 device 預(yù)覽以及隱藏操作。
左側(cè)的工具欄可以切換到簡潔的純圖標(biāo)模式，同時(shí)在左下角你可以對設(shè)備預(yù)覽的尺寸進(jìn)行縮放。
組件檢查
軟件提供的 dev tool 應(yīng)該是整合了 Chrome 內(nèi)核的開發(fā)者工具模塊，在 Sizzy 開啟 dev tool 后，當(dāng)你在終端預(yù)覽上與網(wǎng)頁進(jìn)行交互時(shí)，dev tool 可以同步定位到組件對應(yīng)的代碼位置，文字鏈接，圖片，按鈕啥的，都可以。
組件快速定位
輸入前端代碼中的代表組件名稱進(jìn)行搜索，可以快速定位到相應(yīng)的網(wǎng)頁元素或位置。
同步顯示
當(dāng)你滑動(dòng)一個(gè)終端預(yù)覽時(shí)，其他終端預(yù)覽都會同步滾動(dòng)進(jìn)行顯示。
快速導(dǎo)航
在 Sizzy 的頭部工具欄上可以根據(jù) H1/H2/H3 標(biāo)題對網(wǎng)頁進(jìn)行快速導(dǎo)航。
網(wǎng)絡(luò)設(shè)定
整個(gè)終端預(yù)覽的緩存支持開關(guān)設(shè)定
設(shè)備類型組織
Sizzy 默認(rèn)提供了 iOS、macOS、Android 等系統(tǒng)常見的、最新款的終端模型供用戶選擇顯示。
或者你也可以新建一個(gè)終端，UA 有如下圖所示可選，可以設(shè)定 input type，是觸控屏還是鼠標(biāo)操控，設(shè)備類型以及操作系統(tǒng)，還有最主要的屏幕尺寸設(shè)備，像素比等參數(shù)。
光標(biāo)跟隨
軟件支持顯示實(shí)時(shí)的光標(biāo)跟隨模式。
界面自定義
文章開始時(shí)就提到了界面自定義，Sizzy 提供了純色，漸進(jìn)色、風(fēng)景圖三種進(jìn)行選擇，同時(shí)可以對設(shè)備邊框、頭部、邊界的顯示進(jìn)行開關(guān)設(shè)定。
總的來說，Sizzy 這款軟件非常適合需要適配廣泛終端的前端開發(fā)人員使用，它的定價(jià)政策是：
月付計(jì)劃：一臺設(shè)備起，價(jià)格為 $7/月
年付計(jì)劃：一臺設(shè)備起，價(jià)格為 $5/月，每年 $60
如果你需要更多授權(quán)更多設(shè)備使用 Sizzy，戳官網(wǎng)進(jìn)行了解吧！
