首頁 web前端 js教程 Javascript调试脚本的经验之谈_javascript技巧

Javascript调试脚本的经验之谈_javascript技巧

May 16, 2016 pm 07:00 PM
javascript 腳本 偵錯

随着用JavaScript编程的深入,你会开始理解那些JavaScript给出的不透明错误信息。一旦你理解了你常犯的一般性错误,你就会很快知道怎样避免它们,这样你写的代码中的错误将越来越少。

编程实际上是一种能随着时间不断飞快进步的技术。但是不管变得多么熟练,你仍然要花一些时间调试你的代码。如果你做过家庭作业,或有过JacaScript编程经验,你会知道相当多的时间是花在调试上。这很正常 - 这只是编程者必须做的事之一。实际上,按照大量的研究,程序员平均百分之五十的时间花在解决代码中的错误。
关键是学会怎样有效地调试你的程序。我有一些技巧可以帮助你解决程序为什么没有象应该的那样运行,或者帮你首先避免写有很多错误的代码:
  1.用不同方式打印出变量
  2.注意一般性错误
  3.编码之前先想好
  --------------------------------------------------------------------------------
  如果JavaScript没能捕获你的错误,你也没有通过查看代码发现错误,有时打印出变量会对你有所帮助。最简单的方法是象下面这样使用一个alert():
  // theGreeting gets a name using getName, then presents
  // one or two alert boxes depending on what the name is
  //function getName()
  {
   var first_name = prompt("what's your first name?","");
   var last_name = prompt("what's your last name?","");
   var the_name = first_name + " " + last_name;
   alert("in getName, the_name is: " + the_name);
  }
  -----------------------------找到错误--------------------------------------------------
  1.一般性程序错误
  多数错误只是无聊的语法错误。记住关闭那些引号,大括号和小括号会花费很长时间,不过幸运的是 JavaScript自动错误检测器能捕获大部分此类错误。虽然JavaScript错误检测器随着日渐复杂的流览器而不断完善,但是一些错误仍会溜走。下面是一些需要留意的常见错误:
  2.混淆变量名或函数名
  大写和复数变量和函数名产生的错误令人烦恼地经常出现,有时JavaScript错误检测器不能捕获它们。通过建立和坚持使用一种对变量和函数的命名协定,会大大减少这些麻烦的数量。例如,我全部用小写字母定义变量,并用下划线代替空格(my_variable,the_data, an_example_variable),用内置符号表示函数 (addThreeNumbers(), writeError()等)。我避免使用任何复数,因为我总是忘记那些变量是不是复数。
  3.偶然地使用了保留字
  一些字不能作为变量名,因为它们已经被JavaScript使用。例如,不能定义一个叫 “if”的变量,因为它实际上是JavaScript的一部分 - 如果使用“if”,你会遇到各种麻烦。当你因为使用命名为“if”的变量而变得疯狂时,一个叫做“document”的变量是很诱人的。不幸的是,“document”是一个JavaScript对象。另一个经常遇到的问题是把变量命名为“name”(窗体元素有“names”属性)。把变量命名为“name”不会总出问题,只是有时 - 这会更使人迷惑 - 这就是避免使用“name”变量的原因。
  不幸的是,不同的流览器有不同的保留字,所以没有办法知道该回避哪些字。最安全的办法是避免使用已经成为JavaScript一部分的字和HTML使用的字。如果你因为变量遇到问题,并且不能发现哪儿错了,试着把变量改个名字。如果成功了,你或许就避开了保留字。
  4.记住在逻辑判断时应该用两个等号
  一些流览器能捕获这种错误,有些却不能。这是一种非常常见的错误,但是如果流览器不能替你指出来,你就很难发现。下面是一个这种错误的例子:
  var the_name = prompt("what's your name?", "");
  if (the_name = "the monkey")
  {
  alert("hello monkey!");
  } else {
  alert("hello stranger.");
  }
  这段代码将产生“hello monkey!”警告对话框 - 不管你在提示里敲的是什么 - 这不是我们希望的。原因是在if-then语句中只有一个等号,这句话告诉JavaScript你想让一件事等于另一件。假设你在提示中敲的是 “robbie the robot”。最开始,变量the_name的值是“robbie the robot”,但是随后if语句告诉JavaScript你想把the_name设为“the monkey.”。于是JavaScript很高兴地执行你的命令,送一个“true”消息给if-then语句,结果警告对话框每次都出现“hello monkey!”。这种阴险的错误会使你发疯,所以注意使用两个等号。
  5.偶然给变量加上了引号,或忘了给字符串加引号
  我不时遇到这个问题。JavaScript区分变量和字符串的唯一方法是:字符串有引号,变量没有。下面有一个明显的错误:
  var the_name = 'koko the gorilla';
  alert("the_name is very happy");

  虽然the_name是一个变量,但是程序还会产生一个提示“the_name is very happy,”的警告对话框。这是因为一旦JavaScript看见引号包围着某些东西就不再考虑它,所以当你把the_name放在引号里,你就阻止了 JavaScript从内存中查找它。下面是一个不太明显的此类错误的扩展:
  function wakeMeIn3()
  {
   var the_message = "Wake up! Hey! Hey! WAKE UP!!!!";
   setTimeout("alert(the_message);", 3000);
  }
  这里的问题是你告诉JavaScript三秒后执行alert(the_message)。但是,三秒后the_message将不再存在,因为你已经退出了函数。这个问题可以这样解决:
  function wakeMeIn3()
  {
   var the_message = "Wake up!";
   setTimeout("alert('" + the_message+ "');", 3000);
  }
  把the_message放在引号外面,命令“alert('Wakeup!');”由 setTimeout预定好,就可以得到你想要的。这只是一些可能在你的代码中作祟的很难调试的错误。一旦发现了它们,就有不同的或好或差的方法来改正错误。你很幸运,因为你能从我的经验和错误中获益。
  -------------------------------清除错误------------------------------------
  找到错误,有时侯虽然很难,却只是第一步。然后你必须清除错误。下面是一些在清除错误时应该做的一些事:
  
  首先拷贝你的程序
  有些错误很难清除。实际上,有时在根除错误时,你会破坏整个程序 - 一个小错误使你疯狂。在开始调试前保存你的程序是确保错误不会利用你的最好方法。
  一次修正一个错误
  如果你知道有好几个错误,应该修正一个,检验其结果,再开始下一个。一次修正许多错误而不检验你的工作只会招致更多的错误。
  警惕迷惑性错误
  有时你知道存在一个错误,但不真正知道为什么。假设有一个变量“index”,由于某种原因 “index”总比你期望的小1。你可以做下面两件事中的一件:在那儿坐一会儿,解决它为什么变小了,或只是耸耸肩;在使用“index”之前加1,然后继续进行。后一种方法称为迷惑编程。当你开始思考“究竟是怎么了 - 为什么index是2而不是3呢?好吧...我现在先让它正常工作,以后再修改错误。”时,你正在把一块护创膏布贴到一处潜在的硬伤上。
  迷惑编程可能在短期内有用,但是你可以看到长期的厄运 - 如果你没有完全理解你的代码到可以真正清除错误的程度,那个错误将会回来困扰你。它或者以另一种你不能解决的怪异错误的方式回来,或者当下一个可怜的被诅咒的灵魂读你的代码时,他会发现你的代码非常难以理解。
  寻找小错误
  有时侯,对程序员来说,剪切和粘贴代码的能力是一种很坏的事。通常,你会在一个函数中写一些 JavaScript代码,然后把它们剪切和粘贴到另一个函数中。如果第一个函数有问题,那么现在两个函数都有问题。我并不是说你不应该剪切和粘贴代码。但是错误会以某种方式繁殖,如果你发现了一个错误,你就应该寻找与其相似的其它错误。(或者在制作它的若干版本之前确切知道会发生什么。)变量名拼写错误在一段JavaScript代码中会突然多次出现 - 在一个地方把the_name错拼成teh_name,你就有机会在其它地方发现这个错误。
  如果所有其它的方法都失败了
  如果你正坐在那儿盯着一个错误,并且不能指出是怎么回事(或者根本没有发现错误,但是因为程序不能正确运行,你知道存在错误),你最好从计算机前走开。去读一本书,在角落散散步,或者拿一杯可口的饮料 - 做些事,任何事,但不要去想程序或问题。这种技术在某种情况下叫做“酝酿”,效果非常好。在你稍做休息和放松后,再试着找出错误。你会得到一幅比较清晰的景象。“酝酿”起作用是因为它使你从思维混乱中解脱出来。如果沿着一条错路走太远,你有时会发现无法转身。这种情况下最好开辟一条新路。我知道这会令人发火,但确实有效。真的!
  如果上面的方法还不成功...
  请求别人的帮助。有时你的思想会形成定式,只有换一种眼光才能洞察问题之所在。在结构化编程环境中,程序员们定期地互相复查别人的代码。这可以适当地叫做“代码复查”,不仅可以帮助消除错误,还可以得到更好的代码。不要怕把你的 JavaScript代码给别人看,它会使你成为更好的JavaScript程序员。
  
  但是消除错误的绝对最好的办法是...
  一开始就创建没有错误的代码。
  -------------------------------创建没有错误的代码---------------------------------------
  编好程序的关键是程序是写给人的,不是写给计算机的。如果你能明白其他人或许会阅读你的 JavaScript,你就会写更清晰的代码。代码越清晰,你就越不容易犯错误。机灵的代码是可爱的,但就是这种机灵的代码会产生错误。最好的经验法则是 KISS,即Keep It Simple,Sweetie(保持简单,可爱)。另一个有帮助的技术是在写代码之前作注释。这迫使你在动手之前先想好。一旦写好了注释,你就可以在其下面写代码。
  下面是一个用这种方法写函数的例子:
  第一步:写注释
  第二步:填充代码
  这种先写注释的策略不仅迫使你在写代码前思考,而且使编码的过程看起来容易些 - 通过把任务分成小的,易于编码的各个部分,你的问题看起来就不太象珠穆朗玛峰,而象一群令人愉悦的起伏的小山。
  最后... 总以分号结束你的每一条语句。
  虽然并不是严格必需,你应该养成以分号结束每一条语句的习惯,这样可以避免这行后面再有代码。忘了加分号,下一行好的代码会突然产生错误。把变量初始化为“var”,除非你有更好的理由不这样做。用“var”把变量局域化可以减少一个函数与另一个不相关函数相混淆的机会。
  好了,既然你已经知道了如何编码,下面就让我们学习怎样使
  你的JavaScript快速运行。>>
  ---------------------------------------------------------
  按速度优化JavaScript代码
  1.限制循环内的工作量
  2.定制if-then-else语句,按最可能到最不可能的顺序
  3.最小化重复执行的表达式

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1664
14
CakePHP 教程
1423
52
Laravel 教程
1317
25
PHP教程
1268
29
C# 教程
1246
24
C++ 函式偵錯詳解:如何偵錯多執行緒函數中的問題? C++ 函式偵錯詳解:如何偵錯多執行緒函數中的問題? May 02, 2024 pm 04:15 PM

C++多執行緒偵錯可使用GDB:1.啟用偵錯資訊編譯;2.設定斷點;3.使用infothreads查看執行緒;4.用thread切換執行緒;5.使用next、stepi、locals調試。實戰案例調試死鎖:1.使用threadapplyallbt列印堆疊;2.檢查執行緒狀態;3.單步執行主執行緒;4.使用條件變數協調存取來解決死鎖。

如何使用LeakSanitizer調試C++記憶體洩漏? 如何使用LeakSanitizer調試C++記憶體洩漏? Jun 02, 2024 pm 09:46 PM

如何使用LeakSanitizer調試C++記憶體洩漏?安裝LeakSanitizer。透過編譯標誌啟用LeakSanitizer。運行應用程式並分析LeakSanitizer報告。識別記憶體分配類型和分配位置。修復記憶體洩漏,確保釋放所有動態分配的記憶體。

如何在Java lambda表達式中進行有效的偵錯? 如何在Java lambda表達式中進行有效的偵錯? Apr 24, 2024 pm 12:03 PM

有效調試Lambda表達式:IntelliJIDEA調試器:在變數宣告或方法上設定斷點,檢查內部變數和狀態,查看實際實作類別。 Java9+JVMTI:連接到運行時JVM取得標識符,檢查字節碼設定斷點,監視執行期間變數和狀態。

Java 並發程式設計如何進行並發測試與除錯? Java 並發程式設計如何進行並發測試與除錯? May 09, 2024 am 09:33 AM

並發測試和調試Java並發程式設計中的並發測試和調試至關重要,以下技術可供使用:並發測試:單元測試:隔離並測試單一並發任務。整合測試:測試多個並發任務之間的交互作用。負載測試:評估應用程式在高負載下的效能和可擴展性。並發調試:斷點:暫停線程執行並檢查變數或執行程式碼。日誌記錄:記錄線程事件和狀態。堆疊追蹤:識別異常源頭。視覺化工具:監視執行緒活動和資源使用情況。

golang 函數調試和分析的捷徑 golang 函數調試和分析的捷徑 May 06, 2024 pm 10:42 PM

本文介紹了Go函數調試和分析的捷徑,包括:內建偵錯器dlv,用於暫停執行、檢查變數、設定斷點。日誌記錄,使用log包記錄訊息,在調試時查看。效能分析工具pprof,產生呼叫圖並分析效能,使用gotoolpprof分析資料。實戰案例:透過pprof分析記憶體洩漏,產生呼叫圖顯示導致洩漏的函數。

如何調試 PHP 非同步程式碼 如何調試 PHP 非同步程式碼 May 31, 2024 am 09:08 AM

調試PHP非同步程式碼的工具包括:Psalm:靜態分析工具,可發現潛在錯誤。 ParallelLint:檢查非同步程式碼並提供建議的工具。 Xdebug:用於偵錯PHP應用程式的擴展,可透過啟用會話並逐步執行程式碼來偵錯。其他技巧還包括使用日誌記錄、斷言、局部運行程式碼和編寫單元測試。

Java函數中遞歸呼叫的調試技巧有哪些? Java函數中遞歸呼叫的調試技巧有哪些? May 05, 2024 am 10:48 AM

以下技術可用於偵錯遞歸函數:檢查堆疊追蹤設定調試點檢查基本情況是否正確實現計算遞歸呼叫的次數可視化遞歸堆疊

PHP 偵錯錯誤:常見錯誤的指南 PHP 偵錯錯誤:常見錯誤的指南 Jun 05, 2024 pm 03:18 PM

常見的PHP偵錯錯誤包括:語法錯誤:檢查程式碼語法,確保沒有錯誤。未定義變數:在使用變數之前,請確保已將其初始化並賦值。缺少分號:為所有程式碼區塊加上分號。函數未定義:檢查函數名稱拼字是否正確,並確保已載入正確的檔案或PHP擴充。

See all articles