1. 程式人生 > >瀏覽器除錯之js除錯

瀏覽器除錯之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個