調(diào)試js(調(diào)試JS的方式獲取真實(shí)的16B的KEY)

chrome 如何調(diào)試js

是可以調(diào)試js的。

使用的工具：谷歌瀏覽器、測試的網(wǎng)站；

可以按照下面的方法進(jìn)行調(diào)試：

1、f12 打開開發(fā)者工具，控制臺(tái)介紹：

Elements：頁面元素，可以進(jìn)行編輯，保存后實(shí)時(shí)查看頁面效果；

Network： 查看js模擬的http請(qǐng)求，例如下圖中修改購物車中商品數(shù)量，可以實(shí)時(shí)的看到請(qǐng)求地址，直接上圖。

2、點(diǎn)擊請(qǐng)求地址，會(huì)把請(qǐng)求的頭信息和響應(yīng)信息等數(shù)據(jù)展示出來，此處非常便捷，展示樣式比firebug更直觀，直接上圖，可以點(diǎn)擊查看頭信息，preview，響應(yīng)信息，cookie，timeline對(duì)我們有用的。注意，preview是此處模擬http請(qǐng)求的發(fā)送數(shù)據(jù)，直接預(yù)覽出來了。

3、Sources：次功能是js頁面調(diào)試中最突出的功能，上圖。

功能介紹：左側(cè)sources目錄可以展開，查看加載本頁面所調(diào)用的資源，如js，css，php。此處先介紹斷點(diǎn)調(diào)試，可以順序的看到程序的執(zhí)行過車，勾選右側(cè)的Any XHR 按鈕，上圖。

4、一步一步執(zhí)行，如添加數(shù)量的時(shí)候，可以看到右側(cè)的call stock進(jìn)程，可以看到此處出發(fā)了js中changePrice()函數(shù)，在此處我們可以進(jìn)行邏輯分析了。或則在代碼行處單擊設(shè)置斷點(diǎn)，英文選項(xiàng)是add breakpoints，單擊右擊都可以，最是好用，上圖。

5、可以查看你設(shè)置的所有斷點(diǎn)，右側(cè)展開，如圖，斷點(diǎn)調(diào)試用的比較多，當(dāng)然了還可以在js里直接寫代碼，查看實(shí)時(shí)數(shù)據(jù)變化，查看要注意ctrl+s 保存操作。

6、Timeline：次功能是查看頁面性能，頁面渲染速度的，一般是用不到的。測試人員可以查看，圖中展示一些性能參數(shù)供參考，上圖。

Profile：次功能主要測試加載文件速度參考，可以在此處上傳我們的文件供測試用。點(diǎn)擊 Load上傳即可，一般用不著。

備注：Console：此功能是模擬js控制臺(tái)，直接寫代碼，查看結(jié)果。高級(jí)功能使用時(shí)開啟斷點(diǎn)，查看變量的變化過程。還可以條用函數(shù)。

如何使用firefox進(jìn)行網(wǎng)頁js調(diào)試

1、首先使用Firefox火狐瀏覽器打開需要調(diào)試頁面，也可以在開發(fā)工具設(shè)置火狐瀏覽器來打開：

2、在打開的Firefox瀏覽器中按F12鍵，接著就會(huì)打開“開發(fā)者工具”了：

3、此時(shí)選擇“調(diào)試器”選項(xiàng)，然后選擇需要調(diào)試的JS文件，接著就可以在需要調(diào)試的位置加入斷點(diǎn)進(jìn)行調(diào)試：

4、按F11或者F10單步調(diào)試JS，這里F11和F10的區(qū)別是F11調(diào)試，單步執(zhí)行進(jìn)入調(diào)用的其它函數(shù)；而F10調(diào)試單步執(zhí)行，是不進(jìn)入調(diào)用的其它函數(shù)的。當(dāng)然也可以單機(jī)頁面上相應(yīng)的按鈕進(jìn)行調(diào)試。以上就是用Firefox調(diào)試網(wǎng)頁的過程：

如何進(jìn)行html調(diào)試和js腳本調(diào)試

工具/原料

chrome瀏覽器 Mozilla firefox 電腦

方法/步驟

1、以chrome為例，首先打開需要調(diào)試的頁面，按F12快捷鍵打開調(diào)試工具。

2、選擇指定的dom節(jié)點(diǎn)進(jìn)行查看和編輯。

3、js斷點(diǎn)調(diào)試：chrome非常強(qiáng)大，在chrome調(diào)試工具欄中，你可以進(jìn)行js斷點(diǎn)調(diào)試以及格式化查看（一些大型的門戶網(wǎng)站都會(huì)將js壓縮成無任何格式的代碼這在研究時(shí)特別費(fèi)勁）：我先寫一段簡單的js代碼：function debug(){for (var i=0;i<10;i++){alert(i);}調(diào)試截圖如下：

4、js ajax調(diào)試，ajax技術(shù)如今越來越頻繁使用，所以，ajax調(diào)試也必不可少：在chrome調(diào)試工具中，可以查看到當(dāng)前頁面所以的請(qǐng)求，包括ajax請(qǐng)求，以下是頁面打開后所有發(fā)起的請(qǐng)求。

怎樣用eclip 調(diào)試js

安裝完就可以測試了。需要三個(gè)步驟：
1）在Eclip里建一個(gè)war工程，并寫一個(gè)測試的js文件。然后把這個(gè)war跑起來。
2）啟動(dòng)Google Chrome瀏覽器，并帶上--remote-debugging-port=9222參數(shù)。然后打開上面的網(wǎng)頁地址。
3）在Eclip里配置調(diào)式參數(shù)，然后設(shè)置斷點(diǎn)，看看能不能停在斷點(diǎn)處（就跟調(diào)式Java代碼一樣）。
為此我建了個(gè)測試工程，即File -> New -> Other... -> Web -> Dynamic Web Project，隨便起了個(gè)hhh的工程名，然后新增index.html和js/test.js兩個(gè)文件

JS怎么進(jìn)行單步調(diào)試

1、打開firebug,點(diǎn)擊“腳本”選項(xiàng)。

2、點(diǎn)擊“所有”選項(xiàng)，這里可以選擇要顯示的腳本，建議選擇“顯示所有腳本”。

3、在“所有選項(xiàng)”的旁邊，是當(dāng)前顯示的JavaScript文件的名字，點(diǎn)擊它，可以看到當(dāng)前頁面用到的所有JavaScript文件，在列表里找或者直接在列表的搜索框搜索你要調(diào)試的JavaScript文件。

4、在腳本正文行號(hào)的左邊點(diǎn)擊，可以在此行設(shè)置斷點(diǎn)，程序運(yùn)行到此行就會(huì)暫停。

5、此時(shí)紅點(diǎn)上會(huì)有個(gè)黃色箭頭，代表此行即將被執(zhí)行。右邊的監(jiān)控欄可以輸入你想監(jiān)控的表達(dá)式，查看它的值。

6、腳本正文右上角有四個(gè)圖標(biāo)，第一個(gè)圖標(biāo)表示取消此次調(diào)試，但如果下次程序執(zhí)行到此斷點(diǎn)還是會(huì)暫停；第二個(gè)圖標(biāo)表示單步進(jìn)入程序；第三個(gè)圖標(biāo)表示單步跳過程序；第四個(gè)圖標(biāo)表示單步退出。

注意事項(xiàng)

調(diào)試完腳本后，記得清除斷點(diǎn)，在紅點(diǎn)位置點(diǎn)擊一下就行了。

js 壓縮后的代碼如何調(diào)試

最好的方法是使用在線工具HCJCompress，不僅壓縮HTML、CSS、JS，具有還原功能。

1、進(jìn)入HCJCompress。

2、根據(jù)文件數(shù)量，增刪輸入窗口的數(shù)量。

3、設(shè)置代碼的類型。

4、壓縮代碼，保存帶有調(diào)試輔助信息的源代碼。

5、調(diào)試代碼時(shí)，根據(jù)瀏覽器的提示代碼錯(cuò)誤位置，將錯(cuò)誤位置輸入到HCJCompress中，系統(tǒng)自動(dòng)定位被壓縮的代碼的原始狀態(tài)。

這種方法完美將代碼還原到源代碼中，根據(jù)上下文和注釋，調(diào)試工作，應(yīng)該順利一些吧。