『壹』 谷歌瀏覽器怎麼查看網頁源代碼
方法一、在所在頁面，滑鼠右擊彈出菜單，選擇「查看網頁源代碼」。
方法二：在所在頁面，按ctrl+u快捷鍵打開查看網頁源代碼頁面。
方法三：在所在頁面，按F12打開開發者調試頁面，在Elements標簽下的代碼既是網頁源碼。再按下F12可退出開發者調試頁面。
『貳』 谷歌瀏覽器怎麼調試js
首先我們打開開發者工具，你可以直接在頁面上點擊右鍵，然後選擇審查元素或者在Chrome的工具中找到或者你直接記住這個快捷方式： Ctrl+Shift+I (或者Ctrl+Shift+J直接打開控制台)，或者直接按F12。
1、Elements標簽頁
這個就是查看、編輯頁面上的元素，包括HTML和CSS：
左側就是對頁面HTML結構的查看與編輯，你可以直接在某個元素上雙擊修改元素的屬性，或者你點右鍵選;Edit as Html;直接對元素的HTML進行編輯，或者刪除某個元素，所有的修改都會即時在頁面上得到呈現。（註：看到上面右鍵菜單的最後一個選項;審查元素了么？這是不是說明這個開發者工具的頁面也是HTML來的呢？你點一下就知道了哦，嘿嘿）
你還可以對某個元素進行監聽，在JS對元素的屬性或者HTML進行修改的時候，直接觸發斷點，跳轉到對改元素進行修改的JS代碼處：
Elements標簽頁的右側可以對元素的CSS進行查看與編輯修改：
你還可以通過這里看到各CSS選擇器設置的CSS值的覆蓋情況。
下面的Metrics可以看到元素占的空間情況（寬、高、Padding、Margin）
注意到上面的Properties沒有？這個很有用哦，可以讓你看到元素具有的方法與屬性，比查API手冊要方便得多哦（要注意某些方法和屬性在IE、FireFox等其他瀏覽器下面的支持情況哦）。
2、Resources標簽頁
Resources標簽頁可以查看到請求的資源情況，包括CSS、JS、圖片等的內容，同時還可以查看到存儲相關的如Cookies、HTML5的Database和LocalStore等，你可以對存儲的內容編輯和刪除。
這里的CSS文件有一個好玩的特性，你可以直接修改CSS文件，並且修改即時生效哦：
3、Network標簽頁
Network標簽頁對於分析網站請求的網路情況、查看某一請求的請求頭和響應頭還有響應內容很有用，特別是在查看Ajax類請求的時候，非常有幫助。注意是在你打開Chrome開發者工具後發起的請求，才會在這里顯示的哦。
點擊左側某一個具體去請求URL，可以看到該請求的詳細HTTP請求情況：
我們可以在這里看到HTTP請求頭、HTTP響應頭、HTTP返回的內容等信息，對於開發、調試，都是很有用的。
4、Scripts標簽頁
很明顯，這個標簽頁就是查看JS文件、調試JS代碼的，直接看下圖的說明：
還有你可以打開Javascript控制台，做一些其他的查看或者修改：
你甚至還可以為某一XHR請求或者某一事件設置斷點：
5、Timeline標簽頁
注意這個Timeline的標簽頁不是指網路請求的時間響應情況哦（這個在Network標簽頁里查看），這個Timeline指的JS執行時間、頁面元素渲染時間：
點擊底部的Record就可以開始錄制頁面上執行的內容。
6、Profiles標簽頁
這個主要是做性能優化的，包括查看CPU執行時間與內存佔用：
7、Audits標簽頁
這個對於優化前端頁面、加速網頁載入速度很有用哦（相當與Yslow）：
點擊run按鈕，就可以開始分析頁面，分析完了就可以看到分析結果了
它甚至可以分析出頁面上樣式表中有哪些CSS是沒有被使用的哦：
8、Console標簽頁
就是Javascript控制台了：
這個除了查看錯誤信息、列印調試信息（console.log()）、寫一些測試腳本以外，還可以當作Javascript API查看用。
例如我想查看console都有哪些方法和屬性，我可以直接在Console中輸入;並執行：
怎麼樣，一目瞭然了吧 ？再例如我想查看日期函數都有哪些方法：
（註：注意在這里看到的某些方法和屬性是ES5新增的，記得兼容其他瀏覽器的支持情況哦）
『叄』 怎麼查看網站源代碼
IE9瀏覽器默認情況下隱藏了瀏覽器菜單欄，因此在打開IE9瀏覽器以後，需要按鍵盤上的ALT鍵來顯示瀏覽器工具欄。
在顯示出來的IE菜單欄上點擊菜單「查看」→「源文件」。
IE瀏覽器會自動打開一個新的窗口來顯示網頁源代碼。
哦~這份緣文件實在太難看懂了~別著急，其實IE9提供了一個更為強大的網頁源代碼查看工具——開發者工具。
點擊IE9瀏覽器右上角的齒輪圖標，在下拉菜單中點擊「F12開發者工具」，或者直接按鍵盤上的快捷鍵F12也可以打開開發者工具。
IE9的開發者工具提供更為強大的網頁開發查看代碼和調試功能，你可以使用開發者工具更方便地查看網頁HTML代碼，CSS樣式代碼和腳本等信息。
使用Firefox火狐瀏覽器查看網頁源代碼
Windows Vista/7用戶：點擊Firefox瀏覽器左上角的快捷菜單，在下拉菜單中點擊「Web開發者」→「查看頁面源代碼」。
Windows XP/Linux用戶：點擊Firefox瀏覽器的菜單「工具」→「Web開發者」→「查看頁面源代碼」。
鍵盤快捷鍵：Ctrl+U
Firfox瀏覽器會打開網頁源代碼窗口顯示網頁HTML源代碼。
如果想要查看其中外聯的CSS源文件，可以用滑鼠點擊源代碼中的CSS外聯文件鏈接網址。
不過自帶的之中網頁源文件查看器並不好用，你可以嘗試使用插件Firebug來獲取更好用的網頁開發功能。
點擊「Web開發者」→「獲取更多工具」。
在彈出的Firefox新標簽頁中安裝插件「Firebug」。
安裝完成以後會在Firefox瀏覽器的右上角工具欄中添加Firebug的圖標，點擊它就可以使用Firebug網頁調試工具了。
這個工具相當強大哦~
使用谷歌Chrome瀏覽器查看網頁源代碼
點擊Chrome瀏覽器右上角的快捷菜單「工具」→「查看源代碼」。
Chrome瀏覽器會打開一個網頁源代碼顯示窗口，這個源代碼顯示窗口好像也是不那麼友好，一大堆網頁代碼實在不知道如何下手呀。
如果你想要更好的網頁源代碼顯示和開發工具，那就點擊Chrome瀏覽器右上角的快捷菜單「工具」→「開發者工具」。
看看，不需要下載任何插件，Chrome瀏覽器就已經為你提供了一個相當強大的網頁開發者工具了。
使用Chrome瀏覽器開發者工具來查看和調試CSS也相當好用。