如何在JavaScript debug第三集
debugㄟ郎龍係迪爸蓋。。。
這次是真正介紹怎麼在JavaScript debug！！
（蝦咪？那前兩篇是啥？？？）
來個不重要的前情提要吧
在逢甲工作的時候，英俊前輩教會我怎麼在eclipse使用debug工具中斷程式，追蹤參數
這招真的太好用了！！！！
從此我就擺脫System.out.print這種蠢方法
（只有在追蹤到底哪段程式浪費最多時間時才會把它印出來）
但今天不講eclipse，直接講Javascript
偉大的瀏覽器替直譯的JavaScript提供了debug的方法
說明一下：這招是蟹老闆教我的
首先，按 F12打開『開發人員工具』
然後切換到Sources頁籤
找到你想中斷的JavaScript程式碼
找不到的話，可以在旁邊切換到正確的檔案
在前面的行數輕輕點一下設立中斷點
然後就可以開始造你想要的流程操作網頁了
如下圖所視：當程式跑到中斷點時，就會停住
此時把滑鼠游標指到想追蹤的參數，等待他一下
就會出現參數目前的值是啥，如下圖框起來的部分所示
接下來就看要逐步執行，或是到下一個中斷點
不想繼續debug下去的話，直接把『開發人員工具』關掉就可以了
改完原始檔的javascript程式後，總是會習慣性的F5把畫面重整
這時候如果沒有把『開發人員工具』，網頁就會停在中斷點，很麻煩。。。
（因為他會先跑過一次編譯程式）
所以建議先關掉『開發人員工具』在重新整理（F5）
改JavaScript還有一件更討厭的事！！！！
就是cache！！！怎麼改都沒反應，沒發現是cache作怪的話真的是會卡關卡很久！！
此時可以直接『 ctrl + F5 』，強迫瀏覽器在去抓一次程式
搞定！！！
cache這件事還有其他的問題跟解法
尤其是tomcat真是超會cache的
有空在來寫吧
後記：
我跟蟹老闆說，最近都在po技術文，都快忘記怎麼寫搞笑文了，快不能回到老本行了。
蟹老闆說：你哪有po什麼技術文？你一直都在po搞笑文阿！！！
沒有留言:
張貼留言