網頁設計代碼怎麼調試

1、怎樣在F12下查看源碼和調試網頁CSS

1、在瀏覽器中打開要調試的網頁，使用快捷鍵F12。

2、在彈出的工具窗口中，默認是在Dom Explorer功能，列出網頁的源代碼和CSS樣式列表。

3、使用元素定位功能選擇頁面中的一個元素同時也定位到源代碼中位置，比如百度首頁的"網頁"元素。

4、對定位到的文字修改CSS樣式，添加inline style，比如把字體變紅色。也可以手工修改其他已經存在的樣式。

5、查看元素已經應到到的CSS樣式，點擊"computed"菜單。

6、查看元素的布局信息，點擊"Layout"菜單。

2、製作網頁時怎麼一邊寫代碼一邊調試

一、iOS+Safari1、打開手機web檢查器。通過【設置】>【Safari】>【高級】>【Web檢查器】打開。見下圖（點擊查看大圖），並且你會看到該選項下面對電腦操作的相應描述，照做就好。2.鏈接電腦（Mac）2.1先在手機Safari中打開你想調試的網頁，並用數據線連接到電腦（我這里是Mac）2.2再在電腦上打開Safari點擊【Develop】菜單，就會看到如下圖所示（點擊查看大圖）：3.3點擊2.2中的網站名就會在電腦上打開Safari的控制台，如下圖（點擊查看大圖）：3.調試網頁如上3.3圖所示，此時你可以查看手機網頁的DOM結構，並且和電腦端網頁調試無異，當滑鼠滑過這些DOM節點的時候手機上的相應布局也會高亮起來，如下圖（點擊查看大圖）：二、Android+Chrome1.設置手機1.1【設置】>【關於手機】>【版本號（Buildnumber）】，對版本號這一項連點7下（這是官方文檔里的說法）就會提示「你已成為開發者」。1.2再返回【設置】>【開發者選項】>【USB調試】打開手機USB調試。2.設置電腦（Mac）這塊比較麻煩，因為要裝一下Android的SDK。2.1下載AndroidSDK，並解壓，我把整個adt目錄放在了/Users/David/adt/這里。2.2設置環境變數。打開終端在David路徑下（形如DaviddeMacBook-Pro:~David$）輸入open.bash_profile，如果文件存在則會打開，如果不存在則再輸入touch.bash_profile創建並打開這個文件。在文件里輸入exportPATH=$PATH:/Users/David/adt/sdk/platform-tools:/Users/David/adt/sdk/tools，關閉保存。最後在終端里輸入source.bash_profile來更新環境變數使其生效。終端里輸入adb出現命令幫助信息就是成功了。2.3在終端里輸入adbforwardtcp:9222localabstract:chrome_devtools_remote。3.鏈接電腦3.1在手機上的Chrome里打開想要調試的網頁，用數據線連接手機和電腦（我的是Mac。唉～我只是強調平台的不同，不要誤會）。3.2打開電腦上的Chrome，在地址欄里輸入about:inspect選中【DiscoverUSBDevices】前面的復選框。出現下圖畫面（點擊查看大圖）：4.調試網頁4.1你可以點擊圖3.2中檢測到的設備上正在運行的網站下面那個【inspect】，或者在瀏覽器中輸入localhost:9222打開手機正在瀏覽的網頁列表，如下圖：4.2點擊上圖中的網站縮略圖，就會跳轉到Google的一個代理鏈接（鏈接可能被牆……，掛代理）就會打開如下圖所示的控制台（點擊查看大圖）：4.3這就和電腦上網頁調試沒什麼差別了，滑鼠經過DOM節點，手機上的布局同樣也會高亮起來：

3、如何修改網頁源代碼

你可以在網頁點右鍵,選查看源文件.然後修改.
也可以用軟體Dreamweaver8.0或是FRONTPAGE來修改.前提是,你必須懂代碼,才可以修改.

4、如何調出網頁代碼？

工具/材料：電腦、谷歌瀏覽器。

第一步，打開電腦進入桌面，打開軟體進界面。

第二步，打開軟體進入後，打開相應的文檔。

第三步，找到瀏覽器右上角更多點擊。

第四步，下拉菜單找到更多工具-開發者工具點擊進入。

第五步，點擊後即可彈出網頁代碼。

5、如何使用 F12 開發人員工具調試網頁

uc瀏覽器優點。強力U3內核，輕松走在潮流最前端4360和uc瀏覽器都不錯、關閉，全球獨一無二的上網體驗智能雲語音幫你完成網頁打開、設置菜單，不能斷言哪款最好，上網沖浪，看時下最火的詞彙、免更新、搜索切換，超過癮的上網體驗3，全新HTML5的應用體驗.全新的主屏設計：免下載.全方位的交互細節優化，一鍵完成2.人性化的標簽中心、查東西.傾力打造0秒啟動、切換窗口、看小說新聞美圖，打造自適應屏幕排版、免安裝、瀏覽器設置、內容搜索，隨時隨地即點即用.新增網路熱詞，打造更清爽的瀏覽界面5、文字輸入等操作雙指輕輕一劃即可新建，感受最領先最酷炫的手勢體驗360瀏覽器優點1，只能根據自己的使用習慣來選擇一款適合自己的

6、網頁設計， CSS 調試

試一下把a的display寫為block

7、如何調試html網頁中的js代碼

以谷歌瀏覽器Chrome為例（火狐類似），說下前端打「斷點」：

一、按F12快捷鍵打開Chrome控制台，點擊「Sources」選項卡，如圖：

二、刷新當前網頁，代碼執行到「斷點」處會停住，如上圖藍色區域；

三、按F8快捷鍵可以在不同的斷點之間切換、按F10快捷鍵程序代碼會一步步執行，這樣就能很方便定位到錯誤區域，排查錯誤。

說明：火狐瀏覽器的操作方法和谷歌類似，當然界面略有不同。

8、網站源代碼如何在線進行調試?

開發調試環境: Ubuntu 14.10，openJdk 1.7，Android Studio 1.0.2，android-5.0.1_r1源碼
由於AS是基於IntelliJ IDEA開發的，所以本文也適用於IntelliJ IDEA
一、修改Android Studio(以下簡稱AS)的內存配置

因為在導入源碼時需要消耗大量內存，所以先修改IDEA_HOME/bin/studio64.vmoptions(x86的機器修改studio.vmoptions)中-Xms和-Xmx的值。文檔中使用的是748m, 可自行修改。
二、配置AS的JDK、SDK
在IDE中添加一個沒有classpath的JDK, 這樣可以確保使用源碼里的庫文件

並將其作為要使用的SDK的Java SDK。如下圖

三、生成導入AS所需配置文件(*.ipr)
①編譯源碼(為了確保生成了.java文件，如R.java；如果編譯過，則無需再次編譯)
②檢查out/host/linux-x86/framework/目錄下是否有idegen.jar
如果idegen.jar不存在，執行:
mmm development/tools/idegen/

在5.0.1的源碼中會生成res.java的文件夾，導致idegen.jar運行時拋FileNotFoundException，這是idegen的代碼不夠嚴謹造成的。
我的分享里有修改這個bug的patch，或者直接使用我分享的idegen.jar。
③執行
development/tools/idegen/idegen.sh

等待出現類似下面的結果:
Read excludes: 5ms
Traversed tree: 44078ms

這時會在源碼的根目錄下生成android.ipr和android.iml兩個IntelliJ IDEA(AS是基於IntelliJ IDEA社區版開發的)的配置文件
Tips：
AS在導入代碼時比較慢，建議先修改android.iml，將自己用不到的代碼exclude出去.可以仿照過濾.repo文件夾的語法,如:
<excludeFolder url="file://$MODULE_DIR$/.repo" />
<excludeFolder url="file://$MODULE_DIR$/abi" />
<excludeFolder url="file://$MODULE_DIR$/art" />
這樣在導入時就會跳過abi和art文件夾.過濾的越多，AS的處理速度就會越快.
④在AS中打開源碼根目錄下新生成的android.ipr

如果在導入時AS出現

則建議按照其給定的解決方法來解決(網址:http://confluence.jetbrains.com/display/IDEADEV/Inotify+Watches+Limit)，具體內容如下圖:

四、解決源碼中跳轉錯誤問題
①為當前工程設置正確的SDK和JDK

②設置'Moles'的依賴

先將所有依賴刪掉，只留下上圖'1'所指向的兩個(注意:這里刪除全部只是為了方便。如果確實用到了.jar,在將它們的路徑添加進來就可以了.
如:5.0.1的ContactsCommon用到了geocoder-2.9.jar和libphonenumber-6.2.jar)
點擊上圖中'2'指向的'+'並選擇上圖'3'指向的'Jars or directories'選項，依次將frameworks和external文件夾添加進來.如:

其它版本的代碼在添加frameworks時可能會顯示成:

沒有關系，只是顯示問題，點擊OK還是會把frameworks路徑添加進去的.
如果還有代碼跳轉錯誤，請仿照上面的步驟將相應代碼的路徑或jar文件添加到其Dependencies標簽頁中即可.
五、DEBUG源碼
我們可以通過給剛導入的工程在'Moles'中添加'Android Framework'來讓AS將它作為一個Android工程，從而方便我們調試代碼.

可以按照上圖中'1'和'2'來添加Android Framework支持.

在代碼中加斷點，然後選擇'Run'->'Attach debugger to Android process'或者直接點擊下圖所示的圖標
在彈出的選擇進程(Choose Process)對話框中，勾選顯示所有進程，選擇要DEBUG的代碼所在的進程，點擊OK即可.
六、其它
代碼中很多地方提示Call requires API Level x.... 出現這個問題是因為AS將我們的工程當做安卓應用程序工程了，且源碼中沒有指定minSdkVersion.
我們只需在源碼根目錄加一個聲明minSdkVersion的AndroidManifest.xml文件即可(分享了一個AndroidManifest.xml)。
也可以考慮使用build.gradle來解決該問題。

9、在網頁上用F12打開源代碼怎樣可以修改成功呢？

1、首先在電腦中進入ie瀏覽器首頁，點擊查看，如下圖所示。

2、然後在查看菜單下選擇源，如下圖所示。

3、打開源就看到本網頁的源代碼了，在最下方，如下圖所示。

4、還有一種快捷方法，直接按F12，可以進入調試程序，也是源代碼，如下圖所示就完成了。

10、如何在網頁中調試JavaScript

以IE8瀏覽器為例，接下來重點介紹並演示如何使用瀏覽器自帶的開發人員工具調試JS程序。（該工具快捷按鈕為F12）
1、在工具->Internet選項->高級，去掉「禁用腳步調試（Internet Explorer）」項的勾選。

2、去掉「顯示友好http錯誤信息」項的勾選。最後點擊應用，確定按鈕。

3、預覽表單，當要執行的js程序出現錯誤時，瀏覽器會給出提示。

4、在給出的錯誤提示窗口中，選擇「是（Y）」按鈕，進入IE瀏覽器自帶的開發人員工具腳本調試界面。

5、根據JS調試信息可以知道，當前JS報錯是由於沒有找到指定對象「dat」而導致的。我們需要在表單設計器中，修改JS程序並保存。因演示效果的需要，在本例中是沒有設置id值為dat的單行輸入框控制項的，本例中第二個單行輸入框控制項的id值是data2。修改後的JS代碼。

6、將其改成值data2後，再進行測試不會出現JS報錯信息，程序得以正常執行。

7、本例只是演示了如何利用IE自帶的開發人員工具進行簡單的調試工作，如需了解其他調試及排查技巧，請參閱網路及相關書籍進行學習。