網頁

2015年11月13日 星期五

[JS] 如何在JavaScript debug - 3.使用debug模式

如何在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搞笑文阿!!!


沒有留言:

張貼留言