瀏覽器除錯之js除錯
現在的瀏覽器一般都給了我們除錯js的功能,個人比較推薦使用google瀏覽器,他的除錯結構清晰且強大,下面就來介紹一下google瀏覽器的除錯功能
偵錯程式介面
按下F12,你會發現彈出來一個視窗,並附著在當前頁面,這就是google瀏覽器的偵錯程式,在該視窗中,你能找到有Elements\Console\Sources\Network….,前4個是常用的功能,如果你不習慣這個視窗的位置,你也可以調整它,你可以選擇直接拖動該視窗,你也可以點右上方的三個點一樣的按鈕,來改變他的位置。
Console介面
Console介面的環境與script標籤的環境是一樣的,你可以在這個裡面直接編寫JavaScript程式碼,能達到在script標籤中編寫js程式碼一樣的效果,甚至在網頁被開啟之後,你還可以在console中動態控制dom結構
//例如你可以在Console中寫上
var _div = document.createElement("div"):
document.body.appendChild(_div);
Elements介面
這個選項卡中可以清晰的觀察dom結構,甚至是css屬性,js等等,當你只想觀察頁面的某一個特定區域的dom結構的時候,這時候你不需要一層一層的去展開,而是直接用左上角的按鈕選中即可。
Source
這裡面存放了資原始檔,包括html頁面,css,js等等,這裡面最強大的功能之一就是,你找到一個js檔案之後,開啟,並可以在頁面中設定斷點,你只需要將頁面中的某一行的數字標記就可以了
看到上面的24,就是我們所設定的斷點。當我們重新整理頁面或者觸發該事件的時候,頁面執行就會停到這裡,然後我們再觀察下面這張圖
在這裡,你可以選中觀察到紅箭頭指向的5個按鈕。當你設定好斷點開始執行的時候,
第一個按鈕就會變成一個三角形,當你點選該三角形開始執行的時候,程式就會自動一次性往下執行,直到執行到下一個斷點的位置,若下面沒有斷點,它就會自動執行至結束。
第二個按鈕是逐過程執行,如果這一行呼叫了一個函式,也是一次性執行這個過程
第三個按鈕是也是逐過程執行,只是當這一行是一個函式的時候,他會自動跳轉到函式內部的
第四個按鈕是跳出該函式
第五個按鈕,是忽略所有斷點
你會發現下面還有一個watch區域,點開之後,你會發現有一個+號,當你點選該符號,輸入document.body的時候。你會發現,她能觀察到這dom的結構,也就是說這個watch可以用來檢視JavaScript物件
Network選項卡
該選項卡是觀察網路資訊的選項卡,這個選項卡是專門觀察與伺服器互動狀態的選項卡,甚至你可以觀察到伺服器傳遞過來的資料和瀏覽器傳輸過去的資料,尤其在傳輸json資料的時候,它能很清晰的觀察到json內部傳輸結構
通過瀏覽器除錯發現未知的API
javascript的api這麼多。我相信幾乎沒有人能夠把它全部記住,但是你完全可以在瀏覽器中找到他們
我現在在頁面中建立了一個audio標籤,我要設定為播放該首之後,立即就播放下一首,這時候,你不需要百度,你完全可以在瀏覽器中解決這個問題
首先,我們肯定是要獲取到這個dom物件的,獲取到物件
之後,我們希望能在他播放結束的時候,播放下一首,那麼很簡單的就會想到,要是提供了end方法就好了,我們只需要在end的時候,改變audio的src,然後再play它
首先。我完全沒有使用過這些api,那麼我應該如何去發現他們呢?你只需要watch中輸入document.getElementById(“這個audio的id”),然後並觀察,發現真有一個play方法和onended方法,那麼事件就簡單了
<audio controls="controls" autoplay="autoplay" id="a"></audio>
<script>
var a = document.getElementById("a");
a.src = "許嵩 - 斷橋殘雪.mp3";
a.onended = function(){
a.src = "廬州月.mp3";
a.play();
};
</script>
瀏覽器的除錯幾乎是web開發必備的知識,希望能對大家有所幫助。。。
相關推薦
瀏覽器除錯之js除錯
現在的瀏覽器一般都給了我們除錯js的功能,個人比較推薦使用google瀏覽器,他的除錯結構清晰且強大,下面就來介紹一下google瀏覽器的除錯功能 偵錯程式介面 按下F12,你會發現彈出來一個視窗,並附著在當前頁面,這就是google瀏覽器
移動端Web開發除錯之Weinre除錯教程
在設計師與前端開發人員的努力下,一個WebApp出爐了,可是測試人員說了一堆的問題:某某機型下頁面表現不一致,某某系統下頁面如何如何,某某系統瀏覽器下頁面怎麼怎麼滴。看著滿滿的測試彙總文件,我們曾經在一個又一個知名或不知名的手機終端上重複著這些工作:仔細的排查程式碼,alert可疑的變數,甚至不惜重
xcode除錯之斷點除錯及動態輸出
在開發App的過程中,需要反覆的修改和優化我們的程式碼,特別是當程式出現bug,需要快速的找出錯誤的原因,進行修改,以保證程式的正確執行。 斷點除錯,是最常用最簡單的一種除錯方式,可以一步步跟蹤程式執行的流程,得到變數的值,快速的找到錯誤的原因。 1、斷點的基本操
利用chrome瀏覽器進行js除錯並找出元素繫結的點選事件詳解
大家有沒有遇到這樣的一個問題,我們在分析一些大型電子商務平臺的Web前端指令碼時,想找到一個元素繫結的點選事件,並不是那麼容易,因為有些前端指令碼封裝的比較隱蔽,甚至有些加密指令碼,用傳統的查詢元素ID、或者頁面原始碼方法去找,可能最後徒勞無功。下面我來介紹利用chrome瀏覽器來查詢元素繫
vs2017 瀏覽器關閉、js 程式碼 導致 自動退出除錯狀態
在 vs2017 的 工具->選項 web專案 項 取消勾選 瀏覽器視窗關閉時停止偵錯程式 而我在使用 wangEditor 富文字編輯器時,使用自定義上傳圖片的方法,由於 勾選 瀏覽器視窗關閉時停止偵錯程式 這個選項,導致請求上傳圖片 的 Control
Node.js實戰(四)之除錯Node.js
當專案逐漸擴大以後,功能越來越多,這時有的時候需要增加或者修改,同時優化某些功能,就有可能出問題了。針對於線上Linux環境我們應該如何除錯專案呢? 別怕,Node.js已經為我們考慮到了。 通過 node debug 對應的js檔案 即可除錯程式 例如: node debug hello.js
掌握好寫js程式碼相應的除錯工具之——火狐除錯工具-DevTools
咱們做寫js程式碼的時候,遇到的一個最大的問題就是除錯問題,很多開發者在寫js程式碼的時候,經常都非常痛苦。但是我們如果掌握好相應的除錯工具,那麼就可以比較遊刃有餘的解決js的除錯問題。工欲善其事,必先利其器。
瀏覽器除錯動態js指令碼的方法
前兩天拉取公司前端程式碼修改,發現在開發者工具的sources選項裡邊,居然沒有列出來我要除錯的js指令碼,後來觀察了一下,指令碼是動態在頁面裡引入的,可能是因為這樣所以不顯示出來,但是如果不能斷點除錯,只靠列印日誌真要把人累死了,效率太低,其實有兩種方法可以解決。 1、在腳本里邊增加/
瀏覽器端如何使用VConsole.js除錯程式碼?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>VConsole</title> </head> <bod
利用谷歌瀏覽器進行前端程式碼除錯(JS,JSP)
首先在瀏覽器開啟需要除錯的介面,按F12,開啟除錯視窗。 視窗常用的是介面上的四個:Elements,Console,Sources,Network,下面來介紹各個塊的除錯功能 1、Elements 這個通常用來除錯介面的顯示,比如控制元件位置,大小等,通過點選左上
js除錯之console.log()
俗話說的好,不會前端是phper不是好的php,可是我這對前端真的是一竅不通,連基礎的ajax都差點不會寫。除錯也花了不少時間,因此在這裡記錄一下。 一、console.log
谷歌瀏覽器除錯工具之斷點除錯
今天跟大家講一下前端中比較常用也是比較重要的一個內用——斷點除錯。 在編寫程式碼的過程中經常要對自己寫的js程式碼進行除錯。 先點選F12進入瀏覽器的除錯。 ps: 原生代碼支援動態修改 單步執行過程中,滑鼠選中邏輯語句,可以檢視最終的運算結果
谷歌Chrome瀏覽器開發者工具教程—JS除錯篇
下面介紹的是Chrome開發工具中最有用的面板Sources。 Sources面板幾乎是最常用到的Chrome功能面板,也是解決一般問題的主要功能面板。通常只要是開發遇到了js報錯或者其他程式碼問題,在審視一遍程式碼而一無所獲之後開啟Sources進行js斷點除錯,幾乎能
爬蟲筆記之JS檢測瀏覽器開發者工具是否打開
change 保留 嚴重 href 調試 表達式 ott gif const 在某些情況下我們需要檢測當前用戶是否打開了瀏覽器開發者工具,比如前端爬蟲檢測,如果檢測到用戶打開了控制臺就認為是潛在的爬蟲用戶,再通過其它策略對其進行處理。本篇文章講述了幾種前端JS檢測開發者
node.js 除錯 eggs launch.json配置資訊
{ // 使用 IntelliSense 瞭解相關屬性。 // 懸停以檢視現有屬性的描述。 // 欲瞭解更多資訊,請訪問: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "c
使用CefSharp在.Net程式中嵌入Chrome瀏覽器(六)——除錯
chrome強大的除錯功能令許多開發者愛不釋手,在使用cef的時候,我們也可以繼承這強大的開發者工具。 整合除錯: 我們可以使用如下函式直接使用整合在chrome裡的開發者工具 _chrome.ShowDevTools(); 這種方式下,類似chrome中按F12,直接打開了一個開發者工具視窗,
iOS 以優雅的方式跟後臺聊3840 之 介面除錯“搖一搖”
背景 3840是除錯介面時,經常遇到的問題 每次除錯,都只能在 Xcode 的控制檯檢視日誌 這意味著,每次都要先執行程式,才能檢視具體原因 有沒有一種方式 不用每次都在控制檯看日誌看資料 就能找具體的原因呢? 產生 經後臺同事的提醒 想寫一個除
(第一天)每日原始碼除錯之旅--實現CQRS模式的AXON框架
demo檔案結構: github地址:https://github.com/zxc1210449483/axondemo 開始除錯:先在ProductController的commandGateway.sendAndWait(command)前打上端點,然後用postman傳送PO
JS除錯設定斷點卻無法中斷的解決
分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!  
JS 除錯相關
谷歌瀏覽器如今是Web開發者們所使用的最流行的網頁瀏覽器。伴隨每六個星期一次的釋出週期和不斷擴大的強大的開發功能,Chrome變成了一個必須掌握的工具。大多數前端開發者可能熟悉關於chorme的許多特點,例如使用console和debugger線上編輯CSS。在這篇文章中,我們將分享15個