台灣的Web工程師

只要是最新版本的瀏灠器，一定都可以達到這種效果，不過因為筆者最習慣使用的是Google開發的Chrome瀏灠器，所以下方在介紹與示範時，都會以Chrome為主，建議讀者若不清楚或有不熟悉的瀏灠器，可以先安裝Chrome瀏灠器，依照下方的範例，瞭解相關的功能及使用後，再回到自己熟悉的瀏灠器去尋找相關的功能。

我們以Chrome開啟Google的新聞網頁：https://news.google.com.tw/，看到2016/05/21當天的新聞如下：

假設我們的目標是：修改第一則新聞的圖片。那麼請依照下列步驟：

1. 此時先將滑鼠移到圖片的上方→按右鍵→檢查（參考下圖）。

2. 我們看到Chrome把畫面切割為二個視窗了，而且下方的視窗有一段顏色不太一樣（如果你在第一步有確實的將滑鼠移到圖片上方再按右鍵的話），那一段就直接是圖片的HTML，而且將滑鼠移到下方的位置，Chrome幫你把圖片另外開出來，讓你確認圖片的內容；此時再看回到上方的圖片位置，也被標示起來了。

3. HTML的語法中，圖片是用img的src的屬性來定義的，所以我們要變更src的屬性，做法是將滑鼠移到src屬性位置→按滑鼠右鍵→選擇Edit Attribute，或者指接點二下，就可以進入編輯模式；編輯後按下Enter，就可以看到結果。

4. 將圖象更換後，就可以看到我們剛剛惡搞的效果（在進行這些步驟的時候，Google自動更新新聞了，所以看到的新聞不同，但不影響我們的操作）。

重點說明

在HTML檔案中可能長達千行的程式，但是卻找不到對應的瀏灠器畫面，這時只要透過滑鼠，停留在指定元素上，再按右鍵選單中的「檢查」功能，Chrome會自動幫你跳到對應的HTML程式碼；不過，這些修改只在這一次的頁面中生效，重新整理後，效果就不見了。