uc瀏覽器開發者工具是款uc瀏覽器官方出品的開發者工具,主要是幫助開發者以及其他使用UC瀏覽器的朋友們便捷性的對于UC瀏覽器進行調試,這里小編提供UC開發者工具的常用調試說明給大家,希望能夠幫到大家

官方簡介

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

C瀏覽器開發者工具

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

打開開發者工具界面有兩個途徑:

1.CTRL+SHIFT+I

2.F12

功能說明

可以捕捉的HTTP協議信息

·文件頭

·內容

·Cookie

·查詢字符串

·提交的數據

·重定向的URL地址

HTTP協議捕捉分析工具

·捕捉HTTP協議數據

·可以提供緩沖區信息

·清理對話內容

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

常用調試

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)。

UC瀏覽器開發者工具v0.4.1.000 官方版下載地址

遠程下載