## WeX5代碼調試 本文介紹在WeX5中如何調試js代碼 # 目錄 * [1、調試js代碼](http://wex5.com/cn/?p=4496#1.1) * [1.1、調試自己寫的代碼](http://wex5.com/cn/?p=4496#1.1) * [1.2、調試系統的代碼](http://wex5.com/cn/?p=4496#1.2) * [1.3、chrome瀏覽器開發者工具的使用](http://wex5.com/cn/?p=4496#1.3) # 1、調試js代碼 在js代碼中加入debugger;，在打開chrome瀏覽器的開發者工具的情況下，執行到這個debugger;代碼，瀏覽器就會停下來，此時，就進入調試了，可以單步執行，可以查看變量值，可以查看調用堆棧。 ## 1.1、 調試自己寫的代碼 ### 第一步：在js代碼中加debugger; 例如：要調試外賣案例中加入購物車按鈕的單擊事件 打開/UI2/takeout/index.w文件，選中加入購物車按鈕，在事件編輯器中，雙擊onClick事件值addCartBtnClick，此時設計器切換到js頁，并且定位到了這個方法。 Model.prototype.addCartBtnClick = function(event) { debugger; var row = event.bindingContext.$object; var cartData = this.comp("cartData"); if (cartData.find(['fFoodID'], [row.val('fID')]).length === 0) { cartData.newData({ index : 0, defaultValues : [ { "fFoodID" : row.val("fID"), "fName" : row.val("fName"), "fPrice" : row.val("fPrice"), "fCount" : 1 } ] }); } }; 在方法中的第一行加debugger;，保存js文件。 ### 第二步：在chrome瀏覽器中打開（刷新）頁面 如果沒有在chrome瀏覽器中打開外賣頁面，現在打開這個頁面 如果已經打開了外賣頁面，現在刷新一下這個頁面。 要保證在瀏覽器中的頁面是最新修改后的頁面。 ### 第三步：在chrome瀏覽器中打開開發者工具 按F12或者點菜單，都可以打開開發者工具 [](https://box.kancloud.cn/2015-09-23_56017c98be8d8.jpg) 開發者工具可以顯示在右邊、下邊，或者獨立窗口顯示 [](https://box.kancloud.cn/2015-09-23_56017c9d1e3be.jpg) ### 第四步：操作頁面，觸發執行寫有debugger的方法 點頁面上的加入購物車按鈕，就會執行這個按鈕的單擊事件，就會執行到debugger;，這樣就進入了調試。本文的后面會介紹如何單步調試、如何查看變量值，如果查看調用堆棧。 [](https://box.kancloud.cn/2015-09-23_56017c9e16864.jpg) ## 1.2、 調試系統的代碼 自己寫的js代碼，可以直接加debugger;，那么系統的js文件可以直接加debugger;嗎？系統為了優化性能，在運行時，會加載合并后的min.js文件。而不是原始的js文件，那么在原始的js文件中加debugger就不會起作用了。 ### 1、 系統的js文件已經合并成幾個min.js文件 系統有很多js文件，例如每個組件幾乎都有自己的js文件，還有一些門戶之類的js文件。系統把這些零散的小文件合并成幾個大文件，是為了優化瀏覽器的加載速度。合并后的js文件的后綴是min.js，例如：/UI2/system/common.min.js，那么哪些js文件被合并到這個min.js文件了呢？在/UI2/system/common.min.js.xml文件中，記錄著哪些js文件合并成common.min.js文件。 /UI2/system/common.min.js.xml文件代碼如下： <root> <config> <depend config="core.min.js.xml">core.min.js</depend> <file>lib/base/viewComponent.js</file> <file>lib/base/modelComponent.js</file> <file>lib/base/bindComponent.js</file> <file>components/justep/data/data.js</file> <file>components/justep/data/js/rules.js</file> <file>components/justep/model/model.js</file> <file>components/justep/model/model.config.js</file> <file>components/justep/window/window.js</file> <output name="common.min.js"/> </config> </root> file標簽里面就是要合并的js文件，可以看到data組件的js文件被合并到*common*.min.js文件中了。 ### 2、刪除合并后的min.js文件，將使用原始js文件 在加入購物車按鈕的單擊事件中調用了data組件的find方法，如果要調試data組件的find方法，就需要先刪除common.min.js，這樣common.min.js所合并的那些js文件就都可以調試了。 * 將/UI2/system/common.min.js文件改名或刪除， * 打開/UI2/system/components/justep/data/data.js文件，例如想要調試find方法，在data.js文件中找到find方法，加debugger; [](https://box.kancloud.cn/2015-09-23_56017c9f15db2.jpg) * 刷新頁面，點加入購物車按鈕，會先執行到在這個按鈕的單擊事件里面加的debugger，此時按F8或者開發者工具中的藍色右鍵頭，就會執行到data.js的find方法里面加的debugger了。 [](https://box.kancloud.cn/2015-09-23_56017c9f8c3ce.jpg) ### 3、修改系統js文件后，重新合并生成min.js文件 沒有min.js文件系統可以正常運行，但是為了性能，建議使用min.js文件。 已經刪除的min.js文件，或者修改了系統的js的文件，都需要重新生成min.js文件 執行\tools\dist\dist.bat文件，就會重新進行合并，生成min.js文件 ## 1.3、 chrome瀏覽器開發者工具的使用 ### 1、 單步調試 單步跳過——按下面的按鈕或者F10 [](https://box.kancloud.cn/2015-09-23_56017ca07c296.jpg) 單步進入——按下面的按鈕或者F11 [](https://box.kancloud.cn/2015-09-23_56017ca0d0d7a.jpg) ### 2、 執行到斷點 除了一步一步地往下走，也可以在Sources頁里面設置斷點，然后點藍色的右鍵頭或者F8，就可以執行到設置斷點的行。例如：下圖就在80行設置了斷點。按F8就會執行到80行。 [](https://box.kancloud.cn/2015-09-23_56017ca136f6d.jpg) ### 3、查看變量 在Sources頁——執行過后，變量被賦值，這時就可以查看變量值了。滑動鼠標到變量上，會顯示出變量值 [](https://box.kancloud.cn/2015-09-23_56017ca2d1e92.jpg) 在Scope Variables頁——這里列出當前可訪問的所有的變量 [](https://box.kancloud.cn/2015-09-23_56017ca3b0481.jpg) ### 4、查看表達式 在Watch Expressions頁 * 添加表達式——點右上角的加號進行添加 * 輸入表達式——添加表達式后，即可輸入表達式 * 修改表達式——雙擊表達式即可修改 * 刪除表達式——點表達式右側的減號刪除表達式 [](https://box.kancloud.cn/2015-09-23_56017ca49da25.jpg) ### 5、在更大的界面中查看表達式 在更大的界面中，想查看什么就輸入什么，那么就使用Console頁。 * 例如：在Console頁中輸入this.comp(“cartData”) * 可以查看這個組件的所有屬性和方法 * 可以執行組件的方法，看看有沒有錯誤 * 可以在這里做各種嘗試，更靈活的調試 [](https://box.kancloud.cn/2015-09-23_56017ca587133.jpg) ### 6、查看調用堆棧 在Call Stack頁里面查看調用堆棧 [](https://box.kancloud.cn/2015-09-23_56017ca677d26.jpg)