JavaScript 调试

الأخطاء ستحدث دائمًا، كلما كتبت بعض الكود الجديد للحاسوب.

JavaScript 调试

كتابة JavaScript بدون مُعالج تتبع يمكن أن يكون صعبًا.

قد تحتوي كودك على أخطاء نحوية أو منطقية، والتي يمكن أن تكون صعبة التشخيص.

عادةً، إذا كان يحتوي كود JavaScript على أخطاء، لن يحدث أي شيء. لن تظهر رسالة خطأ، ولن تكون هناك أي إشارات يمكن العثور عليها لتحديد الأخطاء.

عادةً، كلما حاولت كتابة كود جديد في JavaScript، قد تحدث أخطاء.

مُعالج التتبع لـ JavaScript

البحث عن أخطاء في الكود البرمجي يُسمى التتبع.

التتبع ليس سهلاً، لكن لحسن الحظ، جميع المتصفحات الحديثة تحتوي على مُعالج تتبع مدمج.

يمكن فتح وإغلاق المُعالج المدمج، وإجبار المستخدم على استقبال تقارير الأخطاء.

من خلال مُعالج التتبع، يمكنك أيضًا إعداد نقاط توقف (مكان توقف تنفيذ الكود)، وتحقق من المتغيرات أثناء تنفيذ الكود.

عادةً، يتم تشغيل مُعالج التتبع عبر مفتاح F12، ثم اختيار "اللوحة" من قائمة مُعالج التتبع.

طريقة 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().

إعداد نقطة توقف

في نافذة التتبع، يمكنك إعداد نقاط توقف في كود JavaScript.

في كل نقطة توقف، سيوقف JavaScript التنفيذ لتمكينك من التحقق من قيم JavaScript.

بعد التحقق من القيم، يمكنك استئناف تنفيذ الكود.

كلمة مفتاحية debugger

debugger الكلمات المفتاحية توقف تنفيذ JavaScript وتدعو (إذا كان هناك) إلى وظيفة التتبع.

هذا يشبه إعداد نقطة توقف في المُعالج المُعطّل.

إذا كان المُعالج المُعطّل غير متاح،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 是一只卡在电子器件中的真实的虫子（一种昆虫）。