程式設計師跟著大師原始碼學習系列之2：檢視網頁和電子郵件的原始碼

在最近的文章中有大量電子郵件相關的內容，已經有不少同學上手傳送了很多的郵件到我的測試郵箱中。坦率地說，有不少同學傳送的電子郵件格式都是錯誤的 。。。 那麼拋開各種深奧地理論，有沒有一種方法可以看看 163，gmail 它們的郵件格式原始碼是什麼樣的呢？

答案肯定是有的，首先電子郵件也好，網頁也好他們的格式其實都是 mime 。所以我們先來看看怎樣檢視一個漂亮網頁的原始碼吧。說到這裡估計做過網頁的同學都會說，開啟瀏覽器右鍵選單就會有啊。沒錯現在的瀏覽器基本上都有這個功能，不過我還是要在這裡多說一下，雖然現在的瀏覽器基本都有檢視原始碼的功能，不過我這裡要推薦使用 firefox 瀏覽器來檢視原始碼，因為它的功能最強大。最新版本中的 firefox 中的檢視原始碼功能強大到一度讓著名的網頁開發除錯工具宣佈停止更新，建議大家直接使用 firefox 自帶的“檢視原始碼功能”（正式的名稱應該是 “web開發者工具”）。開啟它的方法很簡單：在一個頁面中點選右鍵，然後在彈出選單中選擇“檢視元素”就可以了。如圖：

開啟firefox的開發者工具

開啟後可以看到有很多選項卡，預設就是檢視網頁原始碼的“檢視器”頁面，這也是廣大網頁開發者最常用的功能，滑鼠在各個節點上劃過時還會在原網頁上高亮顯示，確實是非常的方便好用。不過這不是我們要說的重點。我們還是來介紹一下一個鮮為人知的部分吧：修改後檢視結果。傳統的保守老派開發一定很吃驚，什麼一個檢視原始碼的工具還有這功能？真的有，我發現這個功能時也很是意外，現在工具軟體的發展真是快啊。以修改 body 部分的字型為例，先在右邊的“規則”選項卡中找到 body 部分，然後雙擊一下節點，神奇的一幕出現了，你會發現它是可以編輯的！如圖：

可以直接編輯網頁

然後修改 font 部分，更神奇的一幕出現了：網頁的內容改變了，我們居然可以修改一個網站的顯示頁面！雖然這只是本機的快取，但這對網頁的開發者來說是個多麼大的借鑑的機會啊。有了這個功能你就可以測試某個大網站上這個 css 樣式是為什麼要這樣寫，如果不這樣換個方式會有什麼結果 。。。 真的是太方便了。

那麼問題來了，電子郵件有這樣檢視原始碼的工具嗎？有的，不過不是在網頁上，要看到電子郵件的原始碼，我們不能直接開啟 163 的網站用這種方式去檢視。而是要用一些傳統的郵件客戶端。要使用這些客戶端之前，請開啟您的電子郵箱的 smtp/pop3 功能，因為現在好多電子郵箱都是預設不開啟的，有些甚至直接不支援。然後我們來看看哪些郵件客戶端支援檢視原始碼：其實最早期的著名軟體 foxmail 就支援，在收取到的電子郵件上點選右鍵就可以檢視到原始碼。如圖：

foxmail檢視郵件原始碼

這裡我用的是 foxmail 4。2 的經典版本，大家搜尋看看，應該還有很多地方還要以下載到。

好了，第二個問題，我想象 firfox 那樣，修改一下郵件的標題試試 。。。 。。。 這個，foxmail 真做不到。在這裡我很不好意思的介紹一下自己寫的一個軟體：eEmail ，因為我其實沒找到還有其他能直接修改郵件內容並檢視的軟體。如果大家知道的話也可以給我留言，我很樂意向大家再推薦。軟體是我多年前寫的了，這個修改郵件功能就是 foxmail 沒有我才加入的，因為我自己在電子郵件的開發過程中經常要用這個功能。eEmail 也可以在很多地方都搜尋到下載，不過基本上都是老版本，特別是郵件格式相容性上比較老了，有些問題。大家可以到以下網址下載最新的：

newbt。net/ms/vdisk/show_bbs。php？id={B7106D5A-A5CB-3CFE-DFEB-4A4909A9B13A}&pid=43

使用的方法和 foxmail 差不多，郵件上點選右鍵後即可檢視原始碼，還可以修改儲存後看看有什麼變化。也可以將修改後的郵件傳送出去看看“別人”是怎樣解碼的，因為不同的軟體解碼結果有時候是不太一樣的，這樣就可以測試您編寫的郵件格式是不是有問題了。為免嫌疑我就不貼自己軟體的截圖了。也很歡迎大家反饋有相同功能的軟體，因為我自己也需要。

好了，以上工具的這部分功能介紹就是這樣了，希望大家喜歡。