JavaScript การทดสอบ

ข้อผิดพลาดจะเกิดขึ้นตลอดไป ในแต่ละครั้งที่คุณเขียนโค้ดคอมพิวเตอร์ใหม่

JavaScript การทดสอบ

การเขียน JavaScript โดยไม่มีเดบักเกอร์มีความยาก

โค้ดของคุณอาจมีข้อผิดพลาดทางภาษาไว้ที่มาและข้อผิดพลาดทางโครงสร้าง ซึ่งยากที่จะวินิจฉัย

โดยทั่วไป ถ้าโค้ด JavaScript มีข้อผิดพลาด จะไม่มีสิ่งใดเกิดขึ้น. จะไม่มีข้อความข้อผิดพลาด และจะไม่มีข้อมูลที่สามารถตรวจสอบข้อผิดพลาดได้

โดยทั่วไป ในแต่ละครั้งที่คุณพยายามเขียนโค้ด JavaScript โดยมีโอกาสที่จะเกิดข้อผิดพลาด

เดบักเกอร์ JavaScript

การหาข้อผิดพลาดในโค้ดเขียนแปลงเรียกว่าเดบักโค้ด

เดบักไม่ง่าย แต่โดยนัยที่แล้ว ทุกเบราเซอร์สมัยใหม่มีเดบักเกอร์ภายในระบบ

เดบักเกอร์ที่ภายในระบบสามารถเปิดหรือปิดได้ และบังคับรายงานข้อผิดพลาดให้แก่ผู้ใช้

ผ่านเดบักเกอร์ คุณยังสามารถตั้ง breakpoint (จุดที่การปฏิบัติการของโค้ดถูกหยุด) และตรวจสอบตัวแปรระหว่างการปฏิบัติงานของโค้ด

โดยทั่วไป คุณสามารถเปิดเดบักเกอร์ในเบราเซอร์ด้วยปุ่ม F12 และเลือก "Console" ในเมนูเดบักเกอร์

วิธี console.log()

ถ้าเบราเซอร์ของคุณสนับสนุนเดบัก คุณสามารถใช้ console.log() แสดงค่า JavaScript ในหน้าต่างเดบัก

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>

亲自试一试

คำแนะนำ:โปรดเข้าถึงคู่มือตัวอย่าง JavaScript Console ของเราเพื่อข้อมูลเกี่ยวกับวิธีการ console.log()

ตั้ง breakpoint

ในหน้าต่างเดบัก คุณสามารถตั้ง breakpoint ในโค้ด JavaScript

ในทุก breakpoint โค้ด JavaScript จะหยุดทำงานเพื่อให้คุณสามารถตรวจสอบค่าของ JavaScript

หลังจากตรวจสอบค่า คุณสามารถทำงานโค้ดกลับมาต่อ

คำเมนู debugger

debugger คำเมนูจะหยุดการปฏิบัติการของ JavaScript และเรียกฟังก์ชันเดบัก (ถ้ามี)

นี้มีความหมายเดียวกับการตั้ง breakpoint ในเดบักเกอร์

ถ้าเดบักเกอร์ไม่สามารถใช้งานได้debugger ประโยคไม่มีผล

ถ้าเดบักเกอร์เปิดแล้ว โค้ดนี้จะหยุดทำงานก่อนที่จะบรรจุบรรทัดที่สาม

ตัวอย่าง

var x = 15 * 5;
debugger;
document.getElementbyId("demo").innerHTML = x;

亲自试一试

主流浏览器的调试工具

通常，您在浏览器中通过 F12 键启用调试，并在调试器菜单中选择“控制台”。

否则请按照以下步骤：

Chrome

  • 打开浏览器
  • 从菜单中选择工具
  • 从工具中选择开发者工具
  • 最后，选择控制台

Firefox Firebug

  • 打开浏览器
  • 前往网页：http://www.getfirebug.com
  • 根据如下指令：如何安装 Firebug

Internet Explorer

  • 打开浏览器
  • 从菜单选择工具
  • 从工具选择开发者工具
  • 最后，选择控制台

Opera

  • 打开浏览器
  • 请前往网页：http://dev.opera.com
  • 根据如下指令：如何安装 Firebug Lite

Safari Develop Menu

  • 点击 Safari 菜单，偏好设置，高级
  • 选中“在菜单栏中启用开发菜单”
  • 当菜单中出现新选项“开发”时，选择“显示错误控制台”

您知道吗？

调试是测试、找到并减少计算机程序中 bug（错误）的过程。

ʷϵһ֪ı䡣bug һʵеʵеһʵеһֻǴһ֣һɽ