// 免費工具 · HTML 檢視器

HTML 檢視器

開啟一份 .html 檔案，或直接貼上原始碼，它就在這裡畫給你看 —— 在沙箱框裡，可切換手機、平板、桌機三種寬度，任何之後會出狀況的地方都帶行號列在下面。免費、即時、免註冊，而且檔案不會離開你的瀏覽器。

免費即時免註冊不會上傳

其他語言：EnglishDeutschEspañolFrançais日本語한국어Português (Brasil)繁體中文

html 檢視器 · 沙箱
開啟檔案

把 .html 檔案拖到這個方框的任何位置，或選一個。用 FileReader 在這個分頁裡讀取，不會再往外送。

繪製會落後你的輸入約三分之一秒，下方的提示則是即時更新。

繪製結果

這是一個允許執行腳本、但不給同源存取的沙箱框：原始碼跑得起來，卻碰不到這個頁面。選一個寬度，就能看到手機或平板上的版面。

關於這份原始碼的提示

    發佈者： dk · Clize · 更新日期：

    在瀏覽器裡檢視 HTML 檔案的方法

    三個步驟，沒有一步會上傳東西。繪製與提示都是這個頁面裡的同一段腳本，所以斷網也能用。

    1. 開啟原始碼。 把 .html 檔案拖到方框上、用檔案選擇器開啟，或直接把標記貼進來。檔案是用瀏覽器的 FileReader API 讀取的，不會傳送到任何地方。
    2. 先看，再把它變窄來看。 繪製結果出現在沙箱框裡。切到 360px 看手機、768px 看平板 —— 同一份原始碼，放在版面最容易崩掉的那兩個寬度上。
    3. 讀下面的提示。 每一則都帶著它來自的行號：框裡碰不到的引用、安全頁面會丟掉的 http 圖片、讓窄版預覽比實機好看的 viewport 缺漏。

    這個檢視器怎麼繪製你的檔案

    原始碼透過 srcdoc 直接進到一個 iframe，帶著 sandbox="allow-scripts"，而且刻意不給 allow-same-origin。實際上是三件事。你的腳本會執行，所以那種載入時才把自己組出來的頁面真的組得起來。這個框待在自己的不透明來源裡，所以裡面的東西讀不到這個頁面、它的儲存空間或 cookie。而從公開主機取用的 CSS、字型與圖片會正常載入，所以建立在 CDN 上的頁面看起來就跟訪客會看到的一樣。

    有兩類東西是刻意解析不到的，而提示會說出來，不會讓你自己猜。指向原始檔案旁邊的引用 —— style.css、img/hero.png —— 在框裡沒有可以用來解析的資料夾。指向你自己檔案系統的引用，在任何瀏覽器分頁裡都載不出來，那是瀏覽器的限制，不是我們的。如果版面看起來沒有套上樣式，先讀提示，再去翻 CSS。

    中文變成一堆問號和怪符號時，發生了什麼事

    這是繁中檔案在任何檢視器裡最先撞到的一件事，而原因其實很明確。你選擇檔案時，這裡用 FileReader.readAsText() 讀它，而這個 API 一律把位元組當成 UTF-8 解讀。檔案若本來就存成 UTF-8，什麼事都不會發生。若它存成 Big5／CP950（過去十幾年台灣網頁的預設、舊版記事本、舊 CMS 匯出的檔案），中文的位元組在 UTF-8 眼中是不合法的序列，於是整段內文變成「�」（U+FFFD）或一串沒有意義的符號。

    奇怪的地方在於：同一個檔案用滑鼠點兩下打開卻好好的。這不是玄學。瀏覽器自己開啟檔案時，會同時看位元組與 <meta charset> 的宣告來決定編碼；FileReader 不做這件事。所以一個在桌面上正常、在這裡糊掉的檔案，通常是在告訴你一件真的事：等它由一台宣告 charset=utf-8 的伺服器送出去，訪客看到的就是這個樣子。

    檔案實際編碼宣告（meta／伺服器）結果
    UTF-8utf-8正常
    Big5／CP950utf-8（等於這個檢視器）整片「�」或亂符號
    UTF-8Big5典型的亂碼，中文變成一串不相干的漢字
    Big5／CP950Big5讀得到，但工具鏈與部署環境都預設 UTF-8，遲早會踩到

    修法只需要做一次：iconv -f BIG5 -t UTF-8 page.html > page-utf8.html（有些檔案要用 -f CP950 才吃得下全部字），或在 VS Code 右下角點編碼、選「以編碼儲存 → UTF-8」。接著把 <head> 的第一行寫成 <meta charset="utf-8">，否則中間每一層都會重新開始猜。

    這個工具誠實的界線：它判不出檔案真正的編碼，也不會替你轉檔。 它只看 charset 有沒有被宣告。上面的框糊掉這件事本身就是診斷結果，剩下的步驟在你這邊。很多線上檢視器是把檔案傳到伺服器、在那邊猜編碼；這裡選的是不傳，並且在糊掉時告訴你為什麼。

    在 360px 下看繁中版面

    多數檢視器只給你視窗當下寬度的一欄。這裡給框三種寬度：360px 大約是直握的手機、768px 是小平板、整欄則是版面允許的最大值。這個框是真正的瀏覽環境，所以 media query、container query 與 flexbox 的換行都跟著你選的寬度走，而不是跟著你的螢幕。

    提示會自動幫你點出一個前提：沒有 <meta name="viewport" content="width=device-width, initial-scale=1"> 的話，手機根本不會用 360 CSS 像素繪製。它會用 980 左右排完再整頁縮小，字變得很小，你細心寫的手機樣式一次也沒觸發。窄版預覽只有在這個標籤存在時才是誠實的。

    繁中頁面在窄版下的爆版點跟英文頁不一樣，值得特別看三個地方。中文本身很少爆版 —— 字與字之間到處都可以斷行，所以長句子會乖乖折下去。真正撐破版面的是夾在中文裡的長英數字串：網址、產品型號、沒有空白的檔名，瀏覽器不會在它們中間斷，於是整頁被推出去、出現橫向捲軸。overflow-wrap: anywhere 可以解決。第二個是寫死寬度的按鈕與表格：中文字比等量的英文字寬，「立即預約體驗課程」在 360px 下需要的空間遠比原本英文樣板預留的多。第三個是行首標點：逗號、句號被擠到下一行行首，在寬版看不出來，窄版一眼就看到。

    另外提醒一句：你在這個框裡看到的字型，是你電腦上的字型。訪客的裝置不一定有同一套 —— 那件事會決定頁面上線後的樣子，寫在HTML 檔案上線那一頁。

    框下面的提示，以及一般檢視器為什麼沒有

    繪製回答的是「看起來對不對」。它回答不了「換個地方看還對不對」，而意外幾乎都住在後面那一半。所以每一則提示都綁著一個行號與一個具體後果：

    • 用 http:// 載入的圖片，任何安全的頁面都會丟掉。如果你載了範例，現在就正在看一個：上面的標誌不見了，提示指著那一行。
    • 指向自己硬碟的路徑只在你的機器上畫得出來。在這個沙箱框裡它也畫不出來，那正好是其他人體驗的公平預告。
    • 少了 <!DOCTYPE html> 會讓瀏覽器進入相容模式，盒模型與繼承的行高改用 2001 年以前的規則。那時候上面的預覽就不是任何你想要的東西的預覽了。
    • 是模組而不是文件 —— 以 import 或 export default 開頭的內容 —— 根本畫不出來。與其盯著一個空白的框，不如直接被告知。

    如果這個檔案不只是要看看，而是要有一個真正的網址，HTML 檔案上線那一頁會跑同一套檢查，並接上發佈整個資料夾的兩行指令。

    // 常見問題

    要怎麼在不上傳的情況下檢視 HTML 檔案？

    用一個在本機讀檔的檢視器。這個頁面用瀏覽器的 FileReader API 讀取，並在同一分頁的沙箱 iframe 裡繪製，所以內容永遠不會送到伺服器。你也可以直接點兩下用瀏覽器打開檔案；差別在於這個頁面還會告訴你，哪些部分在檔案離開你的硬碟之後行為會不一樣。

    為什麼中文在檢視器裡變成亂碼？

    因為 FileReader 一律把位元組當成 UTF-8 解讀，而你的檔案很可能是 Big5 或 CP950 存的。用滑鼠點兩下打開時看起來正常，是因為那時瀏覽器會同時看位元組與 meta charset 來判斷。用 iconv -f BIG5 -t UTF-8 轉一次，並把 head 第一行寫成 meta charset utf-8 就好了。

    這個檢視器可以偵測或指定編碼嗎？

    不行，直說比較好：它只檢查有沒有宣告 charset，判不出檔案真正的編碼，也不會替你轉檔。框裡糊掉這件事本身就是診斷結果。很多線上檢視器是把檔案送到伺服器去猜編碼；這裡選的是不送，並且在糊掉時說明原因。

    為什麼我的 CSS 或圖片在預覽裡沒有出現？

    因為這個框沒有可以拿來解析相對路徑的資料夾。像 style.css 或 img/hero.png 這種引用指向的是原始檔案旁邊的檔案，而瀏覽器在 srcdoc 框裡碰不到它們。從 https 網址載入的樣式表與圖片則會正常出現。框下面的提示會把每一個解析不到的引用連同行號列出來。

    可以預覽頁面在手機上的樣子嗎？

    可以，把框切到 360px 看手機、768px 看平板。media query 是依框的寬度反應的，所以你看到的就是那個寬度下的版面。但有個前提：如果檔案沒有 viewport meta 標籤，真正的手機根本不會用 360 CSS 像素，窄版預覽會比實機好看。這種情況提示會標出來。

    這個 HTML 檢視器可以離線使用嗎？

    可以。全部都是這個頁面裡的一段腳本，本身沒有任何網路請求。頁面載入之後你可以斷線，繼續開檔案。當然，會去 CDN 抓腳本或字型的原始碼，會在沒有那些東西的狀態下被畫出來。

    要怎麼把我現在看到的東西變成別人打得開的頁面？

    把它存成資料夾裡的 index.html，然後發佈那個資料夾：clize claim yourname 取得免費的 yourname.clize.app，clize deploy ./folder --domain yourname.clize.app 用 HTTPS 讓它上線。沒有要搬進去的編輯器，也沒有匯出步驟 —— 你預覽的位元組就是被提供出去的位元組。

    clize claim + clize deploy —— 這個預覽沒有的那條連結

    接下來，給它一個別人打得開的網址。

    上面的畫面只活在你的分頁裡。兩行指令就能把同一個檔案變成可以貼進訊息的 HTTPS 網址 —— handle 免費、憑證自動、要重新部署幾次都行。

    $ npm i -g @clize/clize && clize login
$ clize claim yourname
$ clize deploy ./folder --domain yourname.clize.app
    [ Sites by Clize → ]
    延伸閱讀 —— 看完之後