Ⅰ 瀏覽器開發者工具怎麼修改本地網頁
1/7 分步閱讀
開發者工具的開啟方法：打開任意一款瀏覽器，點擊「工具」菜單項，從彈出的下拉菜單中點擊「開發者工具」即可打開。
2/7
利用開發者工具來修改網頁內容：
在開發者工具界面中，點擊左側的「搜索」按鈕，該按鈕用於選擇網頁中的一個元素。
3/7
該選擇工具具有網頁元素自動識別功能，可以自行定位並找到最小的元素，如圖所示，小編選擇其中一個連接文字 並點擊。
4/7
點擊對應的文字鏈接後，在開發者工具界面中會自動定位到相應的HTML代碼處。
5/7
如何修改當前行代碼呢？右擊當前行，從彈出的右鍵菜單中選擇「Edit As HTML」項，即以HTML形式進行編輯。
6/7
此時將出現編輯窗口，這樣我們就可以對當前代碼行進行編輯操作啦，如圖，小編將「貼吧」修改成「網路經驗」。
7/7
最後查看網頁內容，就會發現網頁內容被改變啦。
Ⅱ Chrome瀏覽器F12開發者工具的幾個小技巧總結
1、直接修改頁面元素
選擇頁面上元素，右鍵「檢查」，會打開開發者工具窗口，顯示當前選擇元素的源代碼，可以雙擊進行修改。
如果要修改的東西比較多，可以折疊元素並單擊選擇，再右鍵Edit as HTML修改。
2、顏色取色器
選擇頁面上元素，右鍵「檢查」，會打開開發者工具窗口，在Styles窗口中，點擊一個樣式的color右邊小方塊（如沒有color可自己輸入如color:red），會彈出顏色拾取器，可以在上面顏色畫板上選擇一個顏色，也可以選擇「筆」圖標可以拾取頁面上元素的顏色。
3、快速查找並定位文件
查看源代碼，滑鼠移到開發工具窗口，按ctrl+p，輸入鏈接地址的前幾個字母，會自動聯想顯示所有符合條件的地址，點擊打開即可。（有時第一次打開是空白內容，可再點擊一次鏈接）
打開之後，如果是js內容，就可以直接在上面打斷點調試，另外可以點擊內容框的左下角大括弧圖標「{ }」(pretty print)，對代碼進行排版美化。
4、編輯源代碼
（1）【Console】下面輸入框輸入，不過按回車不是換行，會直接執行，如果有多行代碼，需要在別的地方寫好再粘貼進去。
（2）【Sources】下面，點擊左上角第二行Sources旁邊的「>>」打開Snippets，點擊「+ New Snippet」新建一個文件編輯腳本，寫完右鍵「Save」保存，再右鍵點擊這個文件「Run」運行。
說明，如果是要覆蓋頁面js代碼：
如果是函數，則是直接以相同的函數名稱重寫方法即可。
如果是要覆蓋頁面js代碼的按鈕事件，則需要重新注冊該事件，否則相同的多個事件會全部響應。
$('#id').off().on(function() {
alert('test');
});
5、只分析非同步請求資源
【Network】下面點擊「XHR」，這樣就只會顯示XHR非同步請求資源，以便於快速分析請求Headers和Response。