細說網頁開發者工具F12-前端開發利器二

細說網頁開發者工具F12-前端開發利器二

細說網頁開發者工具F12-前端開發利器二

前言

寫這篇文章是細說網頁開發者工具F12 - 前端開發利器的第二篇文章,若覺得不錯請關注作者。

F12之Console

就是位於Elemnets右邊的,打開後你會發現什麼都沒有

細說網頁開發者工具F12-前端開發利器二

我們試著進入到友鏈頁面,發現console面板出現了一些警告。這是因為在https域名下使用http的資源引起的警告。

細說網頁開發者工具F12-前端開發利器二

為了更好的示範,我們這裡新建一個html文件,代碼如下

細說網頁開發者工具F12-前端開發利器二

我們可以看出js的console.log方法可以在console面板輸出內容

細說網頁開發者工具F12-前端開發利器二

這裡我們嘗試書寫錯誤的語法,console面板會報錯,顯示錯誤信息以及錯誤所在的行號

細說網頁開發者工具F12-前端開發利器二

我們還可以直接在console面板直接編寫我們的js代碼。

細說網頁開發者工具F12-前端開發利器二

在百度首頁打開console面板還可以看見百度的招聘信息。

F12之Sources

細說網頁開發者工具F12-前端開發利器二

Sources面板下可以看到網頁加載的各種資源,這裡我們看到除了本域名下的資源,還加載了百度的統計,還有新浪微博的相冊。

通過這個面板我們可以管理網站是否有用到其他網站的資源

未完待續……Continued……


分享到:


相關文章: