作為前端程序員不可避免的會和瀏覽器打交道，所以要對瀏覽器的各個屬性的作用進行了解，方便開發及調試，這里以谷歌瀏覽器為例進行簡單的介紹。一是鞏固對瀏覽器屬性的認識，二是方便大家的學習。

首先打開谷歌瀏覽器按F12查看控制臺屬性。

2.比較常用的是可以選擇不同的設備參數，設備顯示的分辨率大小及顯示的百分比。

在設備選擇的底部可以編輯，可以自定義需要的設備型號及自定義尺寸分辨率尺寸進行保留。

3.可以進行鼠標的選中。點擊這個箭頭可以進行代碼及區域的選中，比較適合調整一些比較難的細節樣式及排查問題。

4.調整樣式，定位問題，也可以在style中定位自己的類名直接寫自己想要的樣式，然后復制到代碼中。

5.控制臺可以查看代碼報錯，根據報錯定位問題，也可以在控制臺輸入一些指令，輸出一些變量及數組，在代碼中可以使用console.log()進行打印輸出。

6.這個源文件指的是可以看到自己的源代碼文件，我們可以在這里找到自己的源代碼文件然后雙擊左側進行debugger操作或者在代碼中寫debugger這個單詞。這個比較方便定位一些比較難得bug,排查問題，直達程序運行到哪里，有沒有取到值等等，相比與console.log,alert優勢還是很大的，可以配合使用，比較常用的快捷鍵，F8放行，F10下一步，F11進入某個方法，最后的那個可以清除bug的標記。

7.這個application可以查看一些緩存，比較我代碼中存的session，cookie等，方便下一個頁面或者流程取值。直接在即將進入的頁面提前打開，然后進入頁面查看自己存的值和對象是不是自己想要的。這個在一些銀行或者大型的內網企業十分常用，因為他們在網關這個層面里面的東西幾乎都是私密的。

8.這個network可以查看一些接口信息，比如前后端交互可以查看接口的入參和返回值，如果入參有，沒有返回值和正確的響應碼都可以把問題拋給后端，可以查看請求及返回時長，一些性能檢測，前后端的入參和返回值、請求頭、響應體、響應碼等都可以在這里查哦

9.后面的這幾個不一一介紹了，用的不是很多，有興趣的可以研究一下。

好啦，時候不早了，還得改bug,本期內容就分享到這里,我們下期見！

總結

以上是生活随笔為你收集整理的浏览器各个属性的作用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。