UC瀏覽器開發者工具（瀏覽器輔助）v0.4.1.000 官方版

一直在使用的UC瀏覽器有時候會提示有問題，而且自己又不知怎麼解決，聽說是有一款UC瀏覽器開發者工具是專門調試UC瀏覽器的而開發的，UC瀏覽器開發者版本功能齊全，可以解決瀏覽器的問題，下麵有詳細的解決方案。

UC瀏覽器開發者工具官方簡介

開發者工具（Developer Tool）支持DevTools Protocol，它允許開發者不再需要依賴其他工具進行調試。最低的內核版本要求為U4/2.0。

UC瀏覽器怎麼打開UC瀏覽器開發者工具

打開開發者工具界麵有兩個途徑：

1.CTRL+SHIFT+I

2.F12

功能說明

可以捕捉的HTTP協議信息

·文件頭

·內容

·Cookie

·查詢字符串

·提交的數據

·重定向的URL地址

HTTP協議捕捉分析工具

·捕捉HTTP協議數據

·可以提供緩衝區信息

·清理對話內容

·HTTP狀態信息和其他過濾選項

UC瀏覽器開發者工具常用調試

1. Screencast

Screencast位於調試界麵左上角(Element左側), 即紅框標注的位置。選中Screencast後, 可以在devtools窗口上看到頁麵效果, 該區域內支持點擊/長按, 支持鼠標滾輪滾動頁麵,　支持鼠標拖動頁麵滑動

2. Element

Element可以查看頁麵 DOM 樹結構和頁麵元素css樣式。

2.1 實時編輯DOM節點和CSS樣式

雙擊DOM樹中的節點，可以實時編輯標簽屬性，修改的效果即刻顯示在瀏覽器中。

點擊右側Style麵板，可以實時修改CSS的屬性值，所有樣式的Name和Value都可編輯; 在每個屬性後麵單擊可以添加新的樣式。 下圖為增加font-size樣式後, 頁麵按新設置的字體大小顯示。

2.2 查看元素監聽的事件

選中節點, 最右側切換到Event Listeners, 即可看到當前節點監聽的所有事件。點擊具體事件, 可以看到該事件所在代碼的位置(格式為”文件名:行號”, 點擊可跳轉到Source中對應代碼的位置)。

3. Console

Console中可以查看頁麵出錯信息，執行javascript代碼等。

3.1 輸出頁麵出錯日誌

內核捕獲頁麵執行中的異常, 輸出在console上。 對於出錯日誌,左側顯示具體出錯的原因, 右側顯示出錯位置(格式為”文件名:行號”, 點擊可跳轉到Source中對應代碼的位置)。

點擊右側出錯信息所在文件和行號, 例如index.js:253,  即跳轉到對應的js資源中。

3.2 輸出調試日誌

通過JS代碼或者命令行console.log()、console.warn()和console.error()可以將日誌信息輸出到console。

3.3 執行javascript代碼

在控製台輸入命令時，會彈出相應的智能提示框，可以用Tab自動完成當前的選項。

通過”$”選擇頁麵元素。

3.4 切換context

對於使用了service worker的頁麵, 可以在console上切換context (默認是top)。