測試開發之前端篇-浏览器开发者工具使用
原創-
2021-10-19 14:27:27
-
2630
本篇目錄
Chrome开发者工具是浏览器內置的、用于对网页浏览有关的内容和行为进行查看和调试的工具。可使用快捷键Ctrl + Shift + J ( 在 Mac 上使用 Cmd + Opt + J) 打开,他显示在浏览器的底部,包涵了以下几个Tab的功能。
Console 控制台
用于查看日志和調試JavaScript腳本。
以上是百度首頁的控制台,大家可以发现开发者用日志的形式打印了一条招聘信息。
在控制台底部的最後一行,我們可以輸入一些JS命令來執行。
Elements 元素查看器
展示當前網頁的HTML代碼。在網頁中,右擊某個控件,選擇檢查,可顯示此控件的源代碼;在源代碼窗口,選中某個控件的HTML,網頁中此控件將被高亮。
在底部左側的窗口可以修改網頁的源代碼,完成後頁面會自動刷新。右側顯示了該元素的樣式表,可以直接修改並預覽。
Sources 源文件查看器
顯示當前網頁的所有資源,包括HTML、CSS、JS、圖片等。左側選中一個JS文件,在右側點擊腳本中的行號,可設置斷點進行調試。另外,我們也可以在第一張圖的控制台中,點擊消息右側的文件名+行號,跳轉到源代碼中指定的位置。
Network 网络请求
展示了网页中各项资源加载所消耗的时间。点击底部资源的名称,可选中并高亮相应颜色对应的文件下載进度条。
Application 应用数据
在前面介紹網絡協議时,我们知道,Session是通过在后续的请求中,将存储在客户端的Cookie发到服務器 来保持的。上图中,展示了客户端可以缓存的以下几种数据。
- Cookie:用于基于Session的服務器端客户身份识别;
- Local Store:在本地浏览器缓存的数据,大小基本没有限制;
- Session Store:同上,但缓存的数据仅限于在相同的浏览器窗口/标签中有效。
以上是和测试有关的一些内容,更多使用幫助,可参考這裏的W3Cschool教程。
-
禅道産品
禅道開源版 禅道企業版 禅道旗艦版 禅道IPD版 -
核心功能
産品管理 項目管理 質量管理 效能管理 -
使用文檔
基本版手冊 企業版手冊 旗艦版手冊 IPD版手冊 開發中心手冊 -
幫助中心
积分問答 常見問題 論壇交流 使用視頻 Gitee GitHub -
關于我們
關于我們 禅道軟件 最新動態 禅道活動 -
禅道社區
禅道博客 積分排行 積分商城 禅道書院 -
聯系方式
聯系人:高麗亞 電話:17667930330 微信:17667930330 Q Q:3645260865北京、上海、深圳分部