如何定位問題(js調試基本技能)

DataTables中文網 22 April 2016

Tags: 博客 技能


今天不講參數,也不講使用方法,講講我們該如果去找到問題,解決問題。誰都有犯錯的時候,但是我們要吸取教訓,在以後的學習道路中少走彎路。 作為前端開發人員幾個基本的知識是一定要知道的。 F12- 人稱萬能的f12,現在主流的浏覽器都有,俗稱開發者工具,隻要浏覽器開着,這個就一定開着.

chrome有兩個方式調出開發者工具 ,ctrl+shift+i 和 F12,在開發者工具裡首先要提到的兩個功能是console和network

  1. console

當你打開了開發者工具,那麼你的關注點就要放在控制台(console)上,比如我現在打開 DataTables中文網 地址,控制台就會有錯誤提示,如圖一

圖一

被标記處是重點需要關注的,對于紅色的錯誤提示,是絕對不容忍了,但是看到這裡,可以判斷出沒有關系,不影響Datatables的顯示。 一般在使用Datatables的時候,如果沒出效果或者方法執行沒效果之類的,首先看控制台有沒有報錯,提示等等, 一定不要忽視控制台打印的任何信息

  1. network

第二類問題出現在開啟了服務器模式了,數據加載異常,這個問題怎麼去找,大部分網友不知道怎麼查看,不會的請看看下圖

圖二 圖三

切換到network功能,在這裡可以看到所有的資源請求,那麼這裡我們根據代碼裡定義的數據url arrays.txt 關鍵字在搜索框裡過濾後找到我們的請求。 從上兩個圖可以在headers部分看到請求的url,請求的參數,在preview部分可以看到返回的數據,那麼當你遇到問題後不知道怎麼解決的時候, 就應該從這些地方檢察,或者貼圖在群裡。切記不要空喊,為什麼沒效果,為什麼?為什麼?為什麼? 不貼代碼,不貼效果圖片,不貼錯誤提示,我們也不知道為什麼。

最後再說一點,使用console.log() 替換 alert() ,不說console.log()是最好用的, 但至少比alert()強百倍,在調試代碼的過程中絕對是大臣。希望從這一講中,大家在遇到問題時, 能更快速的定位到問題,即便自己不能快速定位,把這些信息都貼到群裡,群友也能幫你快速定位到問題所在。

如果大家也有小技巧和使用經驗,歡迎給我發郵件 thxopen@juhua782283.cn



http://m.juhua782283.cn|http://wap.juhua782283.cn|http://www.juhua782283.cn||http://juhua782283.cn