二維碼
        企資網

        掃一掃關注

        當前位置: 首頁 » 企資快報 » 企業 » 正文

        Chrome開發者工具使用教程

        放大字體  縮小字體 發布日期:2021-08-17 20:19:37    作者:啊丟    瀏覽次數:62
        導讀

        前端開發中,經常需要調試代碼,所以各種調試工具及瀏覽器控制臺的使用會對開發起到很大的作用。下面對目前很受喜歡的Chrome開發者工具進行介紹。Chrome開發者工具是一套內嵌到Chrome瀏覽器的Web開發工具和調試工具

        前端開發中,經常需要調試代碼,所以各種調試工具及瀏覽器控制臺的使用會對開發起到很大的作用。下面對目前很受喜歡的Chrome開發者工具進行介紹。Chrome開發者工具是一套內嵌到Chrome瀏覽器的Web開發工具和調試工具,只要安裝了Chrome 瀏覽器,就可以使用。

        在Chrome瀏覽器中,開發者工具的打開方式主要有以下幾種。

        ·按“F12”鍵。

        ·按“Ctrl + Shift +I”組合鍵。

        ·右擊頁面的任意位置,選擇快捷菜單中的“檢查”命令。

        ·單擊 Chrome瀏覽器右上角的自定義圖標,展開菜單,選擇“更多工具”→“開發者工具”命令,如下圖所示。

        打開開發者工具后,會看到有許多標簽的面板,如下圖所示。

        上圖中,比較常用的是Elements、Console、Sources和Network這4個面板,接下來一一為讀者介紹其使用方式。

        1、Elements面板

        Elements面板即元素面板,使用該面板可以直接操作DOM元素和樣式,包括查看元素屬性或者修改元素屬性、修改樣式等,非常方便開發者調試HTML結構和CSS樣式,頁面效果如圖所示。

        在上圖,選中 Elements面板,左側欄會顯示頁面的 DOM結構,右側欄顯示對應的選中節點樣式以及標準盒模型,可以方便查看頁面任意內容的寬、高等屬性。

        在Elements面板中無論修改HTML結構還是CSS代碼,修改以后的效果都會實時同步到頁面中。例如,修改當前選中的標簽的 width屬性為500 px,頁面中的div寬度就會發生變化,同時右側欄中該元素的盒模型值也會更新。

        2. Console面板

        Console面板即控制臺面板,使用該面板不僅可以輸出開發過程中的日志信息,而且可以直接編寫代碼,作為與Javascript進行交互的 Shell命令行,頁面效果如下圖所示。

        在Console面板可直接定義函數并調用。另外,除了在Console面板中直接定義代碼,使用Javascript中注入的Console對象中的常用方法,也可以快速顯示頁面中元素的信息。

        值得一提的是,在Console面板中編寫代碼時,按“Shif+Enter”組合鍵可以實現代碼的換行。

        3. Sources面板

        Sources面板即源代碼面板,如果在工作區打開本地文件,可以實時編輯代碼,并支持斷點調試,如下圖所示。

        在下圖中,打開Javascript文件,單擊代碼前面的編號計可以設詈斷占進行調試,例如單擊代碼序號137和141,設置的所有斷點都會顯示在右側的Breaknoints斷點區。

        然后重新刷新頁面,即可看到設置斷點位置的代碼運行情況。

        4.Network面板

        Network面板即網絡面板,用于記錄頁面上網絡請求的詳情信息,根據她可進行網絡性能優化,打開擴展的Network面板,查看所有請求的運行狀況,頁面效果如圖所示。



         
        (文/啊丟)
        免責聲明
        本文僅代表作發布者:啊丟個人觀點,本站未對其內容進行核實,請讀者僅做參考,如若文中涉及有違公德、觸犯法律的內容,一經發現,立即刪除,需自行承擔相應責任。涉及到版權或其他問題,請及時聯系我們刪除處理郵件:weilaitui@qq.com。
         

        Copyright ? 2016 - 2025 - 企資網 48903.COM All Rights Reserved 粵公網安備 44030702000589號

        粵ICP備16078936號

        微信

        關注
        微信

        微信二維碼

        WAP二維碼

        客服

        聯系
        客服

        聯系客服:

        在線QQ: 303377504

        客服電話: 020-82301567

        E_mail郵箱: weilaitui@qq.com

        微信公眾號: weishitui

        客服001 客服002 客服003

        工作時間:

        周一至周五: 09:00 - 18:00

        反饋

        用戶
        反饋

        主站蜘蛛池模板: 一区二区三区在线观看中文字幕 | 亚洲一区无码精品色| 日本在线观看一区二区三区| 国产高清不卡一区二区| 日韩国产一区二区| 日本一区二三区好的精华液| 少妇精品无码一区二区三区| 国产精久久一区二区三区| 在线观看精品视频一区二区三区| 88国产精品视频一区二区三区| 成人免费av一区二区三区| 国产一区中文字幕在线观看| 午夜一区二区免费视频| 亚洲国产一区二区三区在线观看| 人妻少妇久久中文字幕一区二区 | 国产激情一区二区三区在线观看 | 在线视频精品一区| 亚洲av无一区二区三区| 亚洲欧洲专线一区| 亚洲综合无码一区二区痴汉| 亚洲字幕AV一区二区三区四区| 国产精品亚洲午夜一区二区三区 | 一区二区三区国模大胆| 秋霞鲁丝片一区二区三区| 国内精品视频一区二区八戒| 性色av闺蜜一区二区三区| 国模吧一区二区三区精品视频| 濑亚美莉在线视频一区| 在线精品自拍亚洲第一区| 视频精品一区二区三区| 夜夜爽一区二区三区精品 | 无码国产精品一区二区免费虚拟VR | 91福利视频一区| 无码福利一区二区三区| 无码午夜人妻一区二区不卡视频 | 久久久久一区二区三区| 一区二区三区视频在线| 3d动漫精品成人一区二区三| 欧美亚洲精品一区二区| 一区二区三区日本视频| 国产麻豆精品一区二区三区v视界|