瀏覽器各個(gè)屬性的作用

作為前端程序員不可避免的會(huì)和瀏覽器打交道，所以要對(duì)瀏覽器的各個(gè)屬性的作用進(jìn)行了解，方便開發(fā)及調(diào)試，這里以谷歌瀏覽器為例進(jìn)行簡(jiǎn)單的介紹。一是鞏固對(duì)瀏覽器屬性的認(rèn)識(shí)，二是方便大家的學(xué)習(xí)。

1. 首先打開谷歌瀏覽器按F12查看控制臺(tái)屬性。
   
   

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

在設(shè)備選擇的底部可以編輯，可以自定義需要的設(shè)備型號(hào)及自定義尺寸分辨率尺寸進(jìn)行保留。

3.可以進(jìn)行鼠標(biāo)的選中。點(diǎn)擊這個(gè)箭頭可以進(jìn)行代碼及區(qū)域的選中，比較適合調(diào)整一些比較難的細(xì)節(jié)樣式及排查問題。

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

5.控制臺(tái)可以查看代碼報(bào)錯(cuò)，根據(jù)報(bào)錯(cuò)定位問題，也可以在控制臺(tái)輸入一些指令，輸出一些變量及數(shù)組，在代碼中可以使用console.log()進(jìn)行打印輸出。

6.這個(gè)源文件指的是可以看到自己的源代碼文件，我們可以在這里找到自己的源代碼文件然后雙擊左側(cè)進(jìn)行debugger操作或者在代碼中寫debugger這個(gè)單詞。這個(gè)比較方便定位一些比較難得bug,排查問題，直達(dá)程序運(yùn)行到哪里，有沒有取到值等等，相比與console.log,alert優(yōu)勢(shì)還是很大的，可以配合使用，比較常用的快捷鍵，F(xiàn)8放行，F(xiàn)10下一步，F(xiàn)11進(jìn)入某個(gè)方法，最后的那個(gè)可以清除bug的標(biāo)記。

7.這個(gè)application可以查看一些緩存，比較我代碼中存的session，cookie等，方便下一個(gè)頁面或者流程取值。直接在即將進(jìn)入的頁面提前打開，然后進(jìn)入頁面查看自己存的值和對(duì)象是不是自己想要的。這個(gè)在一些銀行或者大型的內(nèi)網(wǎng)企業(yè)十分常用，因?yàn)樗麄冊(cè)诰W(wǎng)關(guān)這個(gè)層面里面的東西幾乎都是私密的。

8.這個(gè)network可以查看一些接口信息，比如前后端交互可以查看接口的入?yún)⒑头祷刂?，如果入?yún)⒂?，沒有返回值和正確的響應(yīng)碼都可以把問題拋給后端，可以查看請(qǐng)求及返回時(shí)長(zhǎng)，一些性能檢測(cè)，前后端的入?yún)⒑头祷刂怠⒄?qǐng)求頭、響應(yīng)體、響應(yīng)碼等都可以在這里查哦

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

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