การดีบัก JavaScript สมัยใหม่ ข้อผิดพลาดที่สอง: ปัญหาการกำหนดภาษา จุดพักแบบมีเงื่อนไข

สวัสดี! ดำเนินการต่อในหัวข้อ เรามาพูดถึงการดีบักสคริปต์โดยใช้เบราว์เซอร์ ยกตัวอย่างให้มากที่สุด เบราว์เซอร์ที่ดีที่สุดบนโลก - Chrome

โดยหลักการแล้ว เครื่องมือดังกล่าวมีอยู่ในเบราว์เซอร์ใดก็ได้ และหากคุณพิจารณาว่าเบราว์เซอร์ส่วนใหญ่ทำงานบนเอนจิ้นเดียวกับ Chrome ก็จะไม่มีความแตกต่างกันมากนักโดยหลักการแล้ว Firefox ยังดีมากด้วยเครื่องมือ Firebug

มุมมองทั่วไปของแผงแหล่งที่มา

เปิดเบราว์เซอร์ Chrome

กด F12 และเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์จะเปิดขึ้น

ไปที่แท็บแหล่งที่มา

ที่นี่มี 3 โซน:

ภูมิภาค ไฟล์ต้นฉบับ- ประกอบด้วยไฟล์โครงการทั้งหมด
พื้นที่ข้อความ บริเวณนี้มีข้อความของไฟล์
พื้นที่ข้อมูลและการควบคุม เราจะพูดถึงเธอในภายหลัง

ตามกฎแล้ว เมื่อทำการดีบัก ไม่จำเป็นต้องใช้พื้นที่ไฟล์ต้นฉบับ ดังนั้นคุณจึงสามารถซ่อนมันได้ด้วยปุ่ม

ปุ่มควบคุมทั่วไป

3 ปุ่มควบคุมที่ใช้บ่อยที่สุด:

รูปแบบปุ่มนี้ช่วยให้คุณสามารถจัดรูปแบบโค้ดได้ คุณอาจจำเป็นต้องใช้หากคุณต้องการจัดรูปแบบโค้ดของผู้อื่น คอนโซลมาก ปุ่มสำคัญคลิกที่ซึ่งจะเปิดคอนโซล คุณสามารถป้อนคำสั่งและโอเปอเรเตอร์ต่างๆ ใน JavaScript ในคอนโซลได้ หน้าต่างในกรณีที่โค้ดมีส่วนขนาดใหญ่ จะช่วยให้คุณสามารถเปิดโค้ดในหน้าต่างแยกต่างหากได้

เบรกพอยท์

ลองดูไฟล์ pow.js เป็นตัวอย่าง หากคุณคลิกที่บรรทัดใดๆ ของไฟล์นี้ จุดพักจะถูกตั้งค่าบนบรรทัดนั้น

มันควรมีลักษณะดังนี้:

เบรกพอยต์เรียกอีกอย่างว่าเบรกพอยต์ นี่เป็นศัพท์เฉพาะที่ได้รับการหลอมรวมเข้ากับภาษาของเราและยังหมายถึงเบรกพอยต์อีกด้วย

ในโค้ดที่คุณสร้างเบรกพอยต์ คุณสามารถดูค่าของตัวแปรในแต่ละขั้นตอน โดยทั่วไป ติดตามมันในทุกวิถีทางที่เป็นไปได้

ข้อมูลเบรกพอยต์จะปรากฏบนแท็บเบรกพอยต์

แท็บเบรกพอยต์มีประโยชน์มากเมื่อโค้ดมีขนาดใหญ่มาก ซึ่งช่วยให้คุณ:

ไปที่ตำแหน่งในโค้ดที่มีการตั้งค่าเบรกพอยต์อย่างรวดเร็ว ด้วยการคลิกง่ายๆเป็นข้อความ.
ปิดใช้งานเบรกพอยต์ชั่วคราวโดยคลิกที่ช่องทำเครื่องหมาย
ลบเบรกพอยต์อย่างรวดเร็วโดยคลิกขวาที่ข้อความแล้วเลือกลบ

คุณสมบัติเพิ่มเติมบางประการ

เบรกพอยต์สามารถถูกทริกเกอร์ได้โดยตรงจากสคริปต์โดยใช้คำสั่งดีบักเกอร์: function pow(x, n) ( ... debugger; //<-- отладчик остановится тут... }

การคลิกขวาที่หมายเลขบรรทัดใน pow.js จะช่วยให้คุณสร้างสิ่งที่เรียกว่าเบรกพอยต์แบบมีเงื่อนไขได้ เช่น กำหนดเงื่อนไขที่เบรกพอยต์จะถูกทริกเกอร์

หยุดแล้วมองไปรอบๆ

เนื่องจากฟังก์ชันของเราทำงานพร้อมกันกับการโหลดหน้าเว็บ วิธีที่ง่ายที่สุดในการเปิดใช้งานดีบักเกอร์ JavaScript คือการโหลดซ้ำ เมื่อต้องการทำเช่นนี้ ให้กด F5 และในเวลาเดียวกัน การดำเนินการของสคริปต์จะหยุดในบรรทัดที่ 6

ให้ความสนใจกับแท็บข้อมูล:

ดูการแสดงออก– ที่นี่คุณสามารถดูค่าปัจจุบันของตัวแปรที่คุณกำลังติดตามในสคริปต์
โทรสแต็ค– แสดง call stack - นี่คือการเรียกทั้งหมดที่นำไปสู่บรรทัดโค้ดนี้
ตัวแปรขอบเขต– แสดงตัวแปรต่างๆ นอกจากนี้ยังแสดงตัวแปรทั้งระดับโลกและท้องถิ่น

การจัดการการดำเนินการ

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

– ดำเนินการต่อไปหรือกดปุ่ม F8 ปุ่มนี้ดำเนินการสคริปต์ต่อไป วิธีนี้ทำให้เราสามารถอ่านสคริปต์ของเราได้เหมือนกับว่ามันทำงานในเบราว์เซอร์ – ก้าวไปโดยไม่ต้องเข้าสู่ฟังก์ชั่นหรือปุ่ม F10

ดำเนินการหนึ่งขั้นตอนของสคริปต์โดยไม่ต้องเข้าไปในฟังก์ชัน

– ก้าวเข้าสู่ฟังก์ชั่น, ปุ่ม F11. ดำเนินการขั้นตอนหนึ่งของสคริปต์และในเวลาเดียวกันก็เข้าไปในฟังก์ชัน – ดำเนินการจนกระทั่งออกจากฟังก์ชันปัจจุบัน กด Shift+F11

รันโค้ดทั้งหมดที่มีอยู่ในฟังก์ชัน

– ปิดใช้งาน/เปิดใช้งานเบรกพอยต์ทั้งหมด ปุ่มนี้จะปิดการใช้งาน และเมื่อกดอีกครั้ง จะเป็นการเปิดใช้งานเบรกพอยท์ทั้งหมด – เปิด/ปิดการหยุดอัตโนมัติเมื่อเกิดข้อผิดพลาด ปุ่มนี้มีประโยชน์มากเมื่อทำการดีบัก และช่วยให้คุณสามารถเปิดหรือปิดใช้งานการหยุดอัตโนมัติเมื่อเกิดข้อผิดพลาด

กระบวนการดีบักนั้นประกอบด้วยการผ่านโปรแกรมทีละขั้นตอนและการสังเกตค่าของตัวแปร

คอนโซลเบราว์เซอร์

เมื่อแก้ไขโค้ดสคริปต์ จะมีประโยชน์หากไปที่แท็บคอนโซลและดูว่ามีข้อผิดพลาดใดๆ อยู่หรือไม่ คุณยังสามารถส่งออกข้อมูลไปยังคอนโซลโดยใช้ console.log()

ตัวอย่างเช่น:

// ผลลัพธ์จะปรากฏในคอนโซลสำหรับ (var i = 0; i< 6; i++) { console.log("значение", i); }

คอนโซลพร้อมใช้งานในทุกเบราว์เซอร์

ข้อผิดพลาดของคอนโซล

ข้อผิดพลาดของสคริปต์ JavaScript สามารถดูได้ในคอนโซล

ในคอนโซลคุณสามารถดู:

เส้นสีแดงคือข้อความแสดงข้อผิดพลาดที่เกิดขึ้นจริง

ทั้งหมด

ดีบักเกอร์ช่วยให้คุณ:

หยุดที่จุดที่ทำเครื่องหมายไว้ (เบรกพอยต์) หรือที่คำสั่งดีบักเกอร์
รันโค้ด - ดีบักโปรแกรมทีละบรรทัดหรือถึงจุดหนึ่ง
ตรวจสอบตัวแปร ดำเนินการคำสั่งในคอนโซล ฯลฯ

ในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ มีแท็บอื่นๆ เช่น Elements ที่ให้คุณดูโค้ด HTML ของเพจได้ Timeline จะแสดงจำนวนไฟล์ที่เบราว์เซอร์ดาวน์โหลด และระยะเวลาที่ใช้ แต่แท็บเหล่านี้ยังไม่น่าสนใจสำหรับเรามากนัก

Firebug มีดีบักเกอร์ AvaScript ที่ทรงพลัง ซึ่งช่วยให้คุณสามารถหยุดการทำงานชั่วคราวได้ตลอดเวลา และดูทุกตัวแปรในขณะนั้นได้ หากโค้ดของคุณช้า ให้ใช้ตัวสร้างโปรไฟล์ JavaScript เพื่อวัดประสิทธิภาพและค้นหาจุดคอขวดอย่างรวดเร็ว

ค้นหาสคริปต์ได้อย่างง่ายดาย

เว็บแอปพลิเคชันจำนวนมากประกอบด้วยไฟล์จำนวนมาก และการค้นหาไฟล์ที่จะแก้ไขอาจเป็นงานประจำและน่าเบื่อ เมนูการเลือกสคริปต์ของ Firebug จัดเรียงและจัดระเบียบไฟล์เป็นรายการที่ชัดเจนและเข้าใจง่าย ซึ่งช่วยให้คุณค้นหาไฟล์ต่างๆ ได้ด้วยการคลิกเพียงนิ้วเดียว

หยุดการดำเนินการที่บรรทัดใดก็ได้

Firebug ช่วยให้คุณสามารถตั้งค่าเบรกพอยต์ได้ ซึ่งจะบอกให้ดีบักเกอร์หยุดรันสคริปต์เมื่อถึงบรรทัดใดบรรทัดหนึ่ง ในขณะที่การดำเนินการถูกระงับ คุณสามารถดูค่าของตัวแปรใดๆ และตรวจสอบออบเจ็กต์ได้

หากต้องการตั้งค่าเบรกพอยต์ ให้คลิกที่หมายเลขบรรทัดใดๆ และจุดสีแดงจะปรากฏขึ้นตรงนั้น แสดงว่าตั้งค่าเบรกพอยต์แล้ว คลิกที่จุดสีแดงอีกครั้งเพื่อลบเบรกพอยต์

หยุดการดำเนินการชั่วคราวเฉพาะในกรณีที่...

เบรกพอยต์อาจทำให้เกิดปัญหาได้หากถูกกระตุ้นบ่อยเกินไป บางครั้งเราต้องการหยุดการดำเนินการชั่วคราวเฉพาะเมื่อตรงตามเงื่อนไขบางประการเท่านั้น Firebug ช่วยให้คุณตั้งค่าเบรกพอยต์แบบ "มีเงื่อนไข" พวกเขาตรวจสอบนิพจน์ที่ต้องเป็นจริงเพื่อให้เบรกพอยต์ทำงานได้

หากต้องการตั้งค่าเบรกพอยต์แบบมีเงื่อนไข เพียงคลิกขวาที่หมายเลขบรรทัดใดก็ได้ ฟองอากาศจะปรากฏขึ้นเพื่อแจ้งให้คุณป้อนนิพจน์จาวาสคริปต์ คุณสามารถคลิกขวาอีกครั้งเมื่อใดก็ได้เพื่อเปลี่ยนนิพจน์ หรือคลิกซ้ายเพื่อกำจัดเบรกพอยต์

หนึ่งขั้นในเวลา

เมื่อดีบักเกอร์หยุดการดำเนินการชั่วคราว คุณสามารถดำเนินสคริปต์ต่อไปได้ทีละขั้นตอน สิ่งนี้ช่วยให้คุณเห็นได้อย่างชัดเจนว่าการดำเนินการบรรทัดใดบรรทัดหนึ่งส่งผลต่อตัวแปรและอ็อบเจ็กต์อย่างไร

คุณยังสามารถดำเนินการต่อไปได้มากกว่าหนึ่งบรรทัด เลือก "วิ่งไปที่บรรทัดนี้" ในเมนูบริบทของบรรทัดที่ต้องการเพื่อดำเนินการต่อไปยังบรรทัดนี้

ฉันถูกขัดจังหวะเมื่อฉันทำผิดพลาด

คุณไม่ได้เลือกดีบักเกอร์เสมอไป... บางครั้งดีบักเกอร์จะเลือกคุณ Firebug ช่วยให้คุณสามารถข้ามไปยังดีบักเกอร์ได้โดยอัตโนมัติเมื่อเกิดข้อผิดพลาด ดังนั้นคุณจึงสามารถตรวจสอบเงื่อนไขที่เกิดปัญหาได้

กองที่กางออก

เมื่อดีบักเกอร์หยุดชั่วคราว Firebug จะแสดง call stack ซึ่งเป็นชุดของการเรียกใช้ฟังก์ชันที่ซ้อนกันซึ่งกำลังทำงานและรอการส่งคืน

Call Stack จะแสดงด้วยแถบปุ่มเล็กๆ ในแผง โดยแต่ละปุ่มจะมีชื่อของฟังก์ชันบนสแต็ก คุณสามารถคลิกปุ่มใดก็ได้เพื่อข้ามไปยังบรรทัดที่ฟังก์ชันหยุดชั่วคราวและดูค่าของตัวแปรท้องถิ่นจากภายในฟังก์ชัน

การดูการแสดงออก

เมื่อทำการดีบัก คุณมักจะต้องการดูความหมายของนิพจน์ที่ซับซ้อนหรืออ็อบเจ็กต์ที่ฝังอยู่ใน DOM Firebug ช่วยให้คุณสามารถพิมพ์นิพจน์จาวาสคริปต์ได้ตามใจชอบ โดยค่าจะถูกอัปเดตในแต่ละขั้นตอนการดีบักเกอร์

เมื่อพิมพ์นิพจน์ อย่าลืมว่าคุณสามารถใช้แป้น Tab เพื่อเติมคุณสมบัติวัตถุอัตโนมัติได้

คำแนะนำตัวแปร

ขณะที่การดำเนินการหยุดชั่วคราว คุณสามารถเลื่อนเมาส์ไปเหนือตัวแปรใดๆ ของฟังก์ชันปัจจุบันได้ โดยดูคำแนะนำเครื่องมือพร้อมค่าต่างๆ นี่เป็นวิธีที่ดีในการจับตาดูโค้ดและรับคำตอบในขณะที่คุณอ่าน

ประสิทธิภาพของ JavaScript โปรไฟล์

เว็บแอปพลิเคชันของคุณเกือบจะสมบูรณ์แบบแล้ว คุณแก้ไขข้อผิดพลาดทั้งหมดแล้ว คุณสร้างการออกแบบที่มีสไตล์และผู้ใช้ก็ชื่นชอบ ปัญหาเดียวคือฟีเจอร์บางอย่างช้าและคุณไม่แน่ใจว่าทำไม...

ด้วย Firebug คุณไม่ต้องกังวลอีกต่อไปว่าทำไมโค้ดของคุณถึงทำงานช้า เมื่อใช้ตัวสร้างโปรไฟล์ Firebug คุณสามารถแยกแมลงวันออกจากชิ้นเนื้อได้ภายในไม่กี่วินาที

หากต้องการใช้ตัวสร้างโปรไฟล์ เพียงไปที่แท็บคอนโซลแล้วคลิกปุ่ม "โปรไฟล์" จากนั้นใช้แอปพลิเคชันของคุณสักระยะหนึ่งหรือโหลดหน้าซ้ำแล้วคลิก "โปรไฟล์" อีกครั้ง คุณจะเห็นรายงานโดยละเอียดที่แสดงว่าฟังก์ชันใดที่ถูกเรียกใช้และแต่ละฟังก์ชันใช้เวลานานเท่าใด

การบันทึกการเรียกใช้ฟังก์ชัน

บางครั้งมีการเรียกฟังก์ชันที่เป็นปัญหาหลายครั้งจนคุณไม่สามารถเข้าสู่ดีบักเกอร์ในแต่ละครั้งได้ คุณแค่ต้องการทราบว่ามันถูกเรียกเมื่อใดและมีพารามิเตอร์ใดบ้าง

หากต้องการติดตามการเรียกใช้ฟังก์ชันทั้งหมด เพียงคลิกขวาที่แท็บสคริปต์แล้วเลือก "บันทึกการโทรไปที่ "ชื่อฟังก์ชัน" จากนั้นไปที่คอนโซลและดูการโทรปรากฏในบันทึก...

ตรงไปที่สาย 108

บ่อยครั้งที่คุณต้องการไปยังบรรทัดสคริปต์ที่ต้องการอย่างชัดเจน ไม่มีอะไรง่ายไปกว่านี้ เพียงพิมพ์หมายเลขบรรทัดในช่องค้นหาอย่างรวดเร็ว โดยใส่ # ก่อน ดังที่แสดงในภาพหน้าจอด้านซ้าย

ในช่วงไม่กี่ปีที่ผ่านมา เนื่องจากการเกิดขึ้นของไลบรารีต่างๆ เช่น jQuery และ Prototype ทำให้ JavaScript ได้รับตำแหน่งผู้นำในภาษาต่างๆ ในการสร้างสคริปต์สำหรับโครงการเว็บ ความนิยมที่เพิ่มขึ้นและความสะดวกในการใช้งานทำให้เกิดแอปพลิเคชันเต็มรูปแบบ เช่น Gmail ซึ่งมีแอปพลิเคชันนับพันรายการ สตริงจาวาสคริปต์ทำให้มีความต้องการทีมพัฒนาเพิ่มขึ้นเกี่ยวกับระดับความเชี่ยวชาญด้านเครื่องมือ

ผลลัพธ์ของความซับซ้อนของแอปพลิเคชันที่เพิ่มขึ้นจึงมีความจำเป็น เครื่องมืออันทรงพลังเครื่องมือแก้ไขข้อบกพร่องที่ช่วยให้คุณสามารถค้นหาสาเหตุของข้อผิดพลาดได้อย่างรวดเร็วและมีประสิทธิภาพ เอาต์พุตค่าตัวแปรอย่างง่ายโดยใช้ฟังก์ชัน เตือน()สูญเสียความเกี่ยวข้องไป

ใน บทเรียนนี้จัดขึ้น รีวิวสั้น ๆโอกาส เครื่องมือที่ทันสมัยนักพัฒนาที่ช่วยทำการดีบักโค้ด JavaScript มากขึ้น กระบวนการง่ายๆ- จุดเน้นจะอยู่ที่ความสามารถของเบราว์เซอร์ Chrome และโปรแกรมเสริม Firebug สำหรับ FireFox แต่ฟีเจอร์ส่วนใหญ่ที่อธิบายไว้นั้นมีอยู่ในเครื่องมืออื่น ๆ เช่น Dragonfly สำหรับ Opera

คอนโซล - มุมมองทั่วไป

ในโปรแกรมนักพัฒนาส่วนใหญ่มากที่สุด เพื่อนที่ดีที่สุดโปรแกรมเมอร์ก็จะมีคอนโซล แผงอเนกประสงค์ใช้สำหรับบันทึกข้อความแสดงข้อผิดพลาด การตรวจสอบ DOM การดีบัก รหัสจาวาสคริปต์และงานอื่น ๆ อีกมากมาย ขึ้นอยู่กับเบราว์เซอร์ที่คอนโซลถูกเรียก ทีมที่แตกต่างกัน(ยกเว้นการเลือกโดยตรงผ่านเมนู):

วี เบราว์เซอร์ Chromeและ Dragonfly สำหรับ Opera - Ctrl + Shift + I
ไฟร์บั๊ก - F12

คอนโซลจะแสดงข้อผิดพลาดในโค้ดที่ตรวจพบระหว่างการเรียกใช้สคริปต์โดยอัตโนมัติ ไฟล์และบรรทัดจะแสดงรายการถัดจากข้อผิดพลาด และการคลิกที่ข้อผิดพลาดจะย้ายโฟกัสอินพุตไปยังตำแหน่งที่เหมาะสม

เราส่งออกข้อมูลไปยังคอนโซล

คอนโซลไม่เพียงแต่สามารถแสดงข้อผิดพลาดในโค้ดสคริปต์เท่านั้น เมื่อใช้ Console API และ Command Line API คุณสามารถควบคุมเอาต์พุตข้อมูลไปยังคอนโซลได้ ที่มีชื่อเสียงที่สุดและ คำสั่งที่เป็นประโยชน์ .บันทึก().

เมื่อพัฒนาโค้ดฟอร์ม การทราบค่าของตัวแปรจะมีประโยชน์มาก เพื่อให้คุณตรวจสอบได้ว่าโค้ดทำงานอย่างถูกต้องหรือไม่ แนวทางปฏิบัติทั่วไปคือการใช้ฟังก์ชัน เตือน()สำหรับการตรวจสอบด้วยสายตา อย่างไรก็ตาม การใช้วิธีนี้จะบล็อกส่วนที่เหลือของโค้ดไม่ให้ดำเนินการจนกว่าจะคลิกปุ่มในกล่องโต้ตอบ

วิธีแก้ไขที่ทันสมัยคือการใช้วิธีการ console.logซึ่งส่งออกค่าตัวแปรไปยังแผงคอนโซล:

Console.log("บันทึกของกัปตัน"); // แสดง "บันทึกของกัปตัน" ในแผงคอนโซล

สามารถใช้วิธีนี้เพื่อส่งออกค่าที่คำนวณได้:

ฟังก์ชั่น calcPhotos() ( Total_photos_diff = Total_photos - prev_total_photos; // พิมพ์ค่าตัวแปรไปยังคอนโซล console.log(total_photos_diff); )

ข้อดีของวิธีนี้เมื่อเปรียบเทียบกับวิธีการใช้บทสนทนา เตือน()คือการรันโค้ดจะไม่ถูกขัดจังหวะ และนักพัฒนาสามารถพิมพ์ค่าตัวแปรได้หลายครั้งเพื่อสังเกตการเปลี่ยนแปลงของข้อมูลแบบเรียลไทม์

วาร์ เสื้อ = 3, p = 1; ฟังก์ชั่น calcPhotos(total_photos, prev_total_photos) ( var Total_photos_diff = Total_photos - prev_total_photos; // ส่งออกค่าไปยังคอนโซล console.log(total_photos_diff); // อัปเดตค่า t = t*1.3; p = p*1.1 ; ) setInterval(function() ( calcPhotos(t,p); ),100);

การเน้นข้อความ

ในตัวอย่างข้างต้น ลูปจะพิมพ์ค่าตัวแปรจำนวนมากไปยังคอนโซล อย่างไรก็ตาม มักจะสะดวกในการแยกข้อมูลที่แตกต่างกันด้วยสายตาเพื่อเน้นตำแหน่งในโค้ดที่ต้องการอย่างมีประสิทธิภาพ เพิ่มความสนใจ- เพื่อแก้ไขปัญหาดังกล่าว Console API มีหลายวิธี

console.info(): แสดงไอคอน "ข้อมูล" และใส่สีให้กับข้อมูลที่นำเสนอ วิธีการนี้สะดวกในการใช้งานเพื่อเตือนเหตุการณ์ต่างๆ

คอนโซล.คำเตือน(): แสดงไอคอนคำเตือนและสีข้อมูลที่นำเสนอ สะดวกในการใช้งานสำหรับข้อมูลเกี่ยวกับพารามิเตอร์ที่เกินขีดจำกัด

คอนโซล.ข้อผิดพลาด(): แสดงไอคอน "ข้อผิดพลาด" และระบายสีข้อมูลที่นำเสนอ มีประโยชน์สำหรับการรายงานข้อผิดพลาดและสภาวะวิกฤติ

หมายเหตุ: เครื่องมือ นักพัฒนา Chromeไม่มีวิธีการนำเสนอข้อมูลที่แตกต่างในคอนโซล

การใช้งาน วิธีการต่างๆเพื่อส่งออกข้อมูลไปยังคอนโซลทำให้คุณสามารถนำเสนอข้อมูลในรูปแบบภาพได้ การนำเสนอข้อมูลสามารถปรับปรุงได้โดยการปิดกั้น วิธีการที่ใช้ คอนโซล.กลุ่ม() :

// กลุ่มแรก console.group("การคำนวณภาพถ่าย"); console.info ("ผลต่างทั้งหมดตอนนี้" + Total_photos_diff); console.log(total_photos_diff); console.groupEnd(); // กลุ่มที่สอง console.group("ตัวแปรที่เพิ่มขึ้น"); console.log("รูปภาพทั้งหมดตอนนี้: " + t); console.log("รูปภาพทั้งหมดก่อนหน้าตอนนี้: " + p); console.groupEnd();

ตัวอย่างนี้จะจัดกลุ่มข้อมูลในคอนโซล รูปลักษณ์ภายนอกจะแตกต่างกันไปขึ้นอยู่กับ เบราว์เซอร์ที่แตกต่างกันรูปภาพด้านล่างแสดงมุมมองใน Dragonfly for Opera:

ตัวอย่างข้างต้นเป็นเพียงรายการเล็กๆ วิธีการที่มีอยู่จากคอนโซล API มีวิธีที่มีประโยชน์อื่น ๆ อีกมากมายซึ่งอธิบายไว้ในหน้า Firebug อย่างเป็นทางการ

การขัดจังหวะการทำงานของสคริปต์

การพิมพ์ข้อมูลไปยังคอนโซลเป็นคุณสมบัติที่มีประโยชน์ แต่โค้ดสามารถทำงานได้อย่างรวดเร็วและยังคงติดตามตัวแปรจำนวนมากได้

เพื่ออำนวยความสะดวกในกระบวนการแก้ไขจุดบกพร่อง คุณสามารถขัดจังหวะการทำงานของโค้ด ณ จุดใดจุดหนึ่งเพื่อเข้าถึงข้อมูลได้ เบรกพอยต์ใช้สำหรับสิ่งนี้

การทำงานกับเบรกพอยต์

หากต้องการตั้งค่าเบรกพอยต์ ให้ไปที่แท็บ "สคริปต์" แล้วเลือก สคริปต์ที่จำเป็นจากรายการ ตอนนี้เรามองหาบรรทัดที่เราต้องขัดจังหวะการทำงานของสคริปต์ และคลิกที่ฟิลด์ที่มีหมายเลขบรรทัดเพื่อเปิดใช้งาน - ตัวบ่งชี้ที่มองเห็นได้จะปรากฏขึ้น ตอนนี้เราโหลดหน้าซ้ำและการเรียกใช้โค้ดจะถูกขัดจังหวะ ณ จุดที่กำหนด:

เมื่อการดำเนินการถูกขัดจังหวะ คุณสามารถวางเคอร์เซอร์ของเมาส์ไว้เหนือตัวแปรใดก็ได้ จากนั้นดีบักเกอร์จะแสดงคำแนะนำเครื่องมือพร้อมค่าปัจจุบัน

จากนั้นคุณสามารถดำเนินการโค้ดต่อไปได้โดยใช้ ปุ่มพิเศษซึ่งอยู่ที่ด้านบนของแถบด้านข้าง:

แถบด้านข้างช่วยให้คุณติดตามการเปลี่ยนแปลงในสถานะโค้ด รวมถึงไดนามิกของตัวแปรภายในและส่วนกลาง

จุดพักแบบมีเงื่อนไข

เมื่อทำการดีบั๊กโค้ด บางครั้งคุณต้องการหยุดการเรียกใช้โค้ดเมื่อตรงตามเงื่อนไขบางประการเท่านั้น ตัวอย่างเช่น หากสคริปต์ของคุณมีการวนซ้ำที่ใช้เวลา 50 มิลลิวินาทีในการวนซ้ำแต่ละครั้ง จะไม่สะดวกอย่างยิ่งที่จะเริ่มกระบวนการดำเนินการหลังจากหยุดในแต่ละขั้นตอน เมื่อเราต้องการการวนซ้ำเพียง 300 ครั้ง ในกรณีดังกล่าว จะมีการขัดจังหวะแบบมีเงื่อนไข

ในตัวอย่างในรูป การรันโค้ดจะไม่ถูกขัดจังหวะจนกว่าค่าของตัวแปรจะถึง รวม_ภาพถ่าย_diffจะไม่เกิน 200.

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

การตั้งค่าเบรกพอยต์ในโค้ด

ไม่สะดวกเสมอไปในการตั้งค่าเบรกพอยต์โดยใช้อินเทอร์เฟซเครื่องมือสำหรับนักพัฒนาในเบราว์เซอร์ บางครั้งการเรียกใช้ดีบักเกอร์จากภายในโค้ดอาจง่ายกว่า ทีมพิเศษ- ตัวอย่างด้านล่างแสดงวิธีที่คุณสามารถยกเลิกโค้ดได้เมื่อตรงตามเงื่อนไขบางประการ:

ถ้า (total_photos_diff > 300) (ดีบักเกอร์; // เปิดตัวดีบักเกอร์และขัดจังหวะการเรียกใช้โค้ด)

วิธีอื่นในการขัดจังหวะการเรียกใช้โค้ด

นอกเหนือจากการใช้เบรกพอยต์แล้ว เครื่องมือสำหรับนักพัฒนายังมีตัวเลือกอื่นๆ เพื่อหยุดการเรียกใช้โค้ดในกรณีต่างๆ

หยุดเมื่อ DOM เปลี่ยนแปลง

หากคุณต้องการแก้ไขจุดบกพร่องของโค้ดที่จัดการการเปลี่ยนแปลง DOM เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์จะมีวิธีหยุดการทำงานของโค้ดเมื่อโหนด DOM เปลี่ยนแปลง

ในแผงโค้ด HTML เมื่อคลิก ปุ่มขวาเลื่อนเมาส์ไปที่องค์ประกอบที่ต้องการ คุณสามารถเลือกเงื่อนไขสำหรับการหยุดโค้ด (การเปลี่ยนคุณลักษณะ การเพิ่ม/การลบองค์ประกอบสืบทอด การลบองค์ประกอบ) เมื่อ DOM เปลี่ยนแปลง โอเวอร์โหลดโค้ดและเมื่อองค์ประกอบเปลี่ยนแปลง การเรียกใช้โค้ดจะหยุดลง

หยุดเมื่อเกิดข้อยกเว้นทั้งหมดหรือที่ไม่สามารถจัดการได้

เครื่องมือสำหรับนักพัฒนาส่วนใหญ่อนุญาตให้คุณหยุดการทำงานของสคริปต์เมื่อมีข้อยกเว้นเกิดขึ้น ใน โครมให้แล้วสามารถเปิดใช้งานฟังก์ชันนี้ได้โดยใช้ไอคอน "หยุดชั่วคราว" ที่บรรทัดล่างสุดของอินเทอร์เฟซ

คุณสามารถเลือกข้อยกเว้นที่จะหยุดการเรียกใช้โค้ดได้ ตัวอย่างด้านล่างแสดงให้เห็นถึงข้อยกเว้นที่ไม่สามารถจัดการได้หนึ่งรายการ และข้อยกเว้นที่ได้รับการจัดการหนึ่งรายการ (ลอง|catch block):

วาร์ เสื้อ = 3, p = 1; ฟังก์ชั่น calcPhotos(total_photos, prev_total_photos) ( var Total_photos_diff = Total_photos - prev_total_photos; // กลุ่มแรก console.info("ผลต่างทั้งหมดตอนนี้ " + Total_photos_diff); // อัปเดตค่า t = t+5; p = p+1 ; ข้อยกเว้นที่ไม่สามารถจัดการได้ if (total_photos_diff > 300) ( Throw 0; ) // จัดการข้อยกเว้น if (total_photos_diff > 200) ( ลอง ($$("#noexistent-element").hide(); ) catch(e) ( console.error(e ); ) ) ) setInterval(ฟังก์ชั่น() ( calcPhotos(t,p); ),50);

รู้เบื้องต้นเกี่ยวกับ Call Stack

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

เมื่อการเรียกใช้สคริปต์ถูกขัดจังหวะ โปรดให้ความสนใจ แผงด้านขวาซึ่งนำเสนอ ข้อมูลที่เป็นประโยชน์ซึ่งมีสแต็กการโทร

สแต็คการโทรแสดง เส้นทางเต็มซึ่งนำไปสู่จุดที่เกิดข้อผิดพลาดและการเรียกใช้โค้ดหยุดลง

ในรูปด้านล่าง ข้อผิดพลาดถูกสร้างขึ้นโดยเจตนาในฟังก์ชัน ค่าที่เพิ่มขึ้น ()ซึ่งทำให้โค้ดหยุดทำงาน เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์จะแสดง call stack ทั้งหมด ซึ่งช่วยให้คุณสามารถระบุสถานที่ที่อาจเป็นอันตรายได้

บทสรุป

บทเรียนนี้เป็นจุดเริ่มต้นสำหรับการศึกษารายละเอียดเพิ่มเติมเกี่ยวกับเอกสารประกอบสำหรับเครื่องมือที่คุณวางแผนจะใช้งาน

ในบางครั้ง นักพัฒนาก็ทำการเขียนโค้ดผิดพลาด ข้อผิดพลาดในโปรแกรมหรือสคริปต์เรียกว่าจุดบกพร่อง

กระบวนการค้นหาและแก้ไขข้อผิดพลาดเรียกว่าการดีบัก และเป็นส่วนหนึ่งของกระบวนการพัฒนาตามปกติ ส่วนนี้จะกล่าวถึงเครื่องมือและเทคนิคที่สามารถช่วยคุณแก้ไขข้อบกพร่องของงานได้

ข้อความแสดงข้อผิดพลาดใน IE

วิธีที่ง่ายที่สุดในการติดตามข้อผิดพลาดคือการเปิดใช้งานการรายงานข้อผิดพลาดในเบราว์เซอร์ของคุณ โดย อินเทอร์เน็ตเริ่มต้น Explorer จะแสดงไอคอนข้อผิดพลาดในแถบสถานะเมื่อมีข้อผิดพลาดเกิดขึ้นบนเพจ

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

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

หากต้องการเปิดใช้งานตัวเลือกนี้ ให้เลือกเครื่องมือ → ตัวเลือกอินเทอร์เน็ต → แท็บขั้นสูง จากนั้นทำเครื่องหมายที่ช่อง "แสดงการแจ้งเตือนในทุกสคริปต์" ดังที่แสดงด้านล่าง -

ข้อความแสดงข้อผิดพลาดใน Firefox หรือ Mozilla

เบราว์เซอร์อื่นๆ เช่น Firefox, Netscape และ Mozilla ส่งข้อความแสดงข้อผิดพลาดไปยังหน้าต่างพิเศษที่เรียกว่า คอนโซลจาวาสคริปต์หรือคอนโซลข้อผิดพลาด หากต้องการดูคอนโซล ให้เลือกเครื่องมือ → คอนโซลข้อผิดพลาด หรือ การพัฒนาเว็บ

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

การแจ้งเตือนข้อผิดพลาด

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

หากคุณใช้ Firefox คุณสามารถคลิกที่ข้อผิดพลาดที่มีอยู่ในคอนโซลข้อผิดพลาดเพื่อไปที่ เส้นที่แน่นอนในสคริปต์โดยมีข้อผิดพลาด

วิธีการดีบักสคริปต์

มีอยู่ วิธีต่างๆการดีบัก JavaScript ของคุณ - ใช้ JavaScript Validator

วิธีหนึ่งในการทดสอบโค้ด JavaScript สำหรับ ข้อผิดพลาดแปลก ๆ- เรียกใช้ผ่านโปรแกรมที่ตรวจสอบเพื่อให้แน่ใจว่าถูกต้องและเป็นไปตามกฎไวยากรณ์อย่างเป็นทางการของภาษา โปรแกรมเหล่านี้เรียกว่า parsers หรือเรียกสั้นๆ ว่า validators และมักมาพร้อมกับเชิงพาณิชย์ บรรณาธิการ HTMLและจาวาสคริปต์

เครื่องมือตรวจสอบที่สะดวกที่สุดสำหรับ JavaScript คือ JavaScript Lint ของ Douglas Crockford ซึ่งให้บริการฟรีใน JavaScript Lint ของ Douglas Crockford

เพียงไปที่หน้าเว็บนี้ วางโค้ด JavaScript (JavaScript เท่านั้น) ลงในพื้นที่ข้อความที่ให้ไว้ แล้วคลิกปุ่ม jslint โปรแกรมนี้จะวิเคราะห์โค้ด JavaScript ของคุณ เพื่อให้แน่ใจว่าคำจำกัดความของตัวแปรและฟังก์ชันทั้งหมดเป็นไปตามไวยากรณ์ที่ถูกต้อง เขาจะตรวจสอบด้วย คำแนะนำจาวาสคริปต์เช่น if และ while เพื่อให้เป็นไปตามรูปแบบที่ถูกต้องด้วย

เพิ่มรหัสการดีบักให้กับโปรแกรมของคุณ

คุณสามารถใช้เมธอด alert() หรือ document.write() ในโปรแกรมของคุณเพื่อดีบักโค้ดของคุณได้ ตัวอย่างเช่น คุณสามารถเขียนข้อความประมาณนี้:

การดีบัก var = จริง; var whichImage = "วิดเจ็ต"; if(debugging) alert("เรียก swapImage() พร้อมอาร์กิวเมนต์: " + whichImage); var swapStatus = swapImage(ซึ่งรูปภาพ); if(debug) alert("ออกจาก swapImage() with swapStatus=" + swapStatus);

ด้วยการตรวจสอบเนื้อหาและลำดับของ alert() ตามที่ปรากฏ คุณสามารถทดสอบการทำงานของโปรแกรมของคุณได้อย่างง่ายดาย

วิธีการใช้ดีบักเกอร์ JavaScript

ดีบักเกอร์คือแอปพลิเคชันที่การดำเนินการสคริปต์ทุกด้านอยู่ภายใต้การควบคุมของโปรแกรมเมอร์ ตัวดีบักเกอร์ให้การควบคุมสถานะของสคริปต์อย่างละเอียดผ่านอินเทอร์เฟซที่ให้คุณตรวจสอบและตั้งค่าและควบคุมขั้นตอนการดำเนินการ

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

ใช้ความคิดเห็นมากมาย ความคิดเห็นช่วยให้คุณอธิบายว่าทำไมคุณถึงเขียนสคริปต์ในแบบที่คุณทำ และอธิบายส่วนที่ยากเป็นพิเศษของโค้ด
ใช้การเยื้องเสมอเพื่อทำให้โค้ดของคุณอ่านง่าย การเยื้องยังช่วยให้คุณจับคู่แท็กเริ่มต้นและแท็กสิ้นสุดได้ง่ายขึ้น วงเล็บปีกกาและคนอื่น ๆ องค์ประกอบ HTMLและสคริปต์
เขียนโค้ดโมดูลาร์ เมื่อใดก็ตามที่เป็นไปได้ ให้จัดกลุ่มคำสั่งของคุณออกเป็นฟังก์ชันต่างๆ ฟังก์ชั่นช่วยให้คุณสามารถจัดกลุ่มได้ ผู้ประกอบการที่เกี่ยวข้องและทดสอบและนำบางส่วนของโค้ดกลับมาใช้ใหม่โดยใช้ความพยายามเพียงเล็กน้อย
ตั้งชื่อตัวแปรและฟังก์ชันให้สม่ำเสมอ พยายามใช้ชื่อที่ยาวพอที่จะมีความหมายและอธิบายเนื้อหาของตัวแปรหรือวัตถุประสงค์ของฟังก์ชัน
ใช้ไวยากรณ์ที่สอดคล้องกันเมื่อตั้งชื่อตัวแปรและฟังก์ชัน กล่าวอีกนัยหนึ่ง เก็บไว้ในนั้น ตัวพิมพ์เล็กหรือใน ตัวพิมพ์ใหญ่- หากคุณต้องการสัญกรณ์ Camel-Back ให้ใช้อย่างสม่ำเสมอ
ตรวจสอบสคริปต์ขนาดยาวในลักษณะโมดูลาร์ กล่าวอีกนัยหนึ่ง อย่าพยายามเขียนสคริปต์ทั้งหมดก่อนที่จะทดสอบส่วนใดๆ ของสคริปต์ เขียนส่วนและรันก่อนที่จะเพิ่มส่วนถัดไปของโค้ด
ใช้ชื่อที่สื่อความหมายสำหรับตัวแปรและฟังก์ชัน และหลีกเลี่ยงการใช้ชื่อที่มีอักขระตัวเดียว
ระวังคำพูด โปรดจำไว้ว่ามีการใช้เครื่องหมายคำพูดเป็นคู่รอบๆ สตริง และเครื่องหมายคำพูดทั้งสองจะต้องเป็นรูปแบบเดียวกัน (หนึ่งหรือสอง)
ติดตามสัญญาณที่เท่ากันของคุณ คุณไม่ควรใช้ one = เพื่อการเปรียบเทียบ
ฉันประกาศตัวแปรอย่างชัดเจนโดยใช้ คำสำคัญ var.

ในช่วงไม่กี่ปีที่ผ่านมา เนื่องจากการเกิดขึ้นของไลบรารีต่างๆ เช่น jQuery และ Prototype ทำให้ JavaScript ได้รับตำแหน่งผู้นำในภาษาต่างๆ ในการสร้างสคริปต์สำหรับโครงการเว็บ ความนิยมที่เพิ่มขึ้นและความสะดวกในการใช้งานนำไปสู่การเกิดขึ้นของแอปพลิเคชันเต็มรูปแบบ เช่น Gmail ซึ่งมี JavaScript หลายพันบรรทัด ทำให้ทีมพัฒนามีความต้องการเพิ่มขึ้นในแง่ของความเชี่ยวชาญด้านเครื่องมือ

ผลลัพธ์ของความซับซ้อนของแอปพลิเคชันที่เพิ่มขึ้นคือความต้องการเครื่องมือแก้ไขจุดบกพร่องที่มีประสิทธิภาพซึ่งสามารถค้นหาแหล่งที่มาของข้อผิดพลาดได้อย่างรวดเร็วและมีประสิทธิภาพ เอาต์พุตค่าตัวแปรอย่างง่ายโดยใช้ฟังก์ชัน เตือน()สูญเสียความเกี่ยวข้องไป

บทเรียนนี้ให้ภาพรวมโดยย่อเกี่ยวกับความสามารถของเครื่องมือสำหรับนักพัฒนาสมัยใหม่ที่ช่วยให้การดีบักโค้ด JavaScript เป็นกระบวนการที่ง่ายขึ้น จุดเน้นจะอยู่ที่ความสามารถของเบราว์เซอร์ Chrome และโปรแกรมเสริม Firebug สำหรับ FireFox แต่ฟีเจอร์ส่วนใหญ่ที่อธิบายไว้นั้นมีอยู่ในเครื่องมืออื่น ๆ เช่น Dragonfly สำหรับ Opera

คอนโซล - มุมมองทั่วไป

ในโปรแกรมสำหรับนักพัฒนาส่วนใหญ่ คอนโซลเป็นเพื่อนที่ดีที่สุดของโปรแกรมเมอร์ แผงอเนกประสงค์ใช้สำหรับบันทึกข้อความแสดงข้อผิดพลาด การตรวจสอบ DOM การดีบักโค้ด JavaScript และงานอื่นๆ อีกมากมาย ขึ้นอยู่กับเบราว์เซอร์ คอนโซลถูกเรียกด้วยคำสั่งที่แตกต่างกัน (ยกเว้นการเลือกโดยตรงผ่านเมนู):

ในเบราว์เซอร์ Chrome และ Dragonfly สำหรับ Opera - Ctrl + Shift + I
ไฟร์บั๊ก - F12

เราส่งออกข้อมูลไปยังคอนโซล

คอนโซลไม่เพียงแต่สามารถแสดงข้อผิดพลาดในโค้ดสคริปต์เท่านั้น เมื่อใช้ Console API และ Command Line API คุณสามารถควบคุมเอาต์พุตข้อมูลไปยังคอนโซลได้ คำสั่งที่มีชื่อเสียงและมีประโยชน์ที่สุด .บันทึก().

Console.log("บันทึกของกัปตัน"); // แสดง "บันทึกของกัปตัน" ในแผงคอนโซล

สามารถใช้วิธีนี้เพื่อส่งออกค่าที่คำนวณได้:

การเน้นข้อความ

ในตัวอย่างข้างต้น ลูปจะพิมพ์ค่าตัวแปรจำนวนมากไปยังคอนโซล อย่างไรก็ตาม การแยกข้อมูลที่แตกต่างกันออกไปด้วยภาพมักจะมีประโยชน์เพื่อเน้นส่วนต่างๆ ในโค้ดที่ต้องการความสนใจมากขึ้นอย่างมีประสิทธิภาพ เพื่อแก้ไขปัญหาดังกล่าว Console API มีหลายวิธี

console.info(): แสดงไอคอน "ข้อมูล" และใส่สีให้กับข้อมูลที่นำเสนอ วิธีนี้จะสะดวกในการใช้เตือนเหตุการณ์ต่างๆ

หมายเหตุ: เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome ไม่สามารถแสดงข้อมูลที่แตกต่างออกไปในคอนโซลได้

การใช้วิธีการต่างๆ ในการส่งออกข้อมูลไปยังคอนโซลทำให้คุณสามารถนำเสนอข้อมูลในรูปแบบภาพได้ การนำเสนอข้อมูลสามารถปรับปรุงได้โดยการปิดกั้น วิธีการที่ใช้ คอนโซล.กลุ่ม() :

ตัวอย่างนี้จะจัดกลุ่มข้อมูลในคอนโซล การนำเสนอด้วยภาพจะแตกต่างกันไปในเบราว์เซอร์ที่แตกต่างกัน รูปด้านล่างแสดงมุมมองใน Dragonfly สำหรับ Opera:

ตัวอย่างข้างต้นแสดงรายการเล็กๆ น้อยๆ ของวิธีการที่ใช้ได้จาก Console API มีวิธีที่มีประโยชน์อื่น ๆ อีกมากมายซึ่งอธิบายไว้ในหน้า Firebug อย่างเป็นทางการ

การขัดจังหวะการทำงานของสคริปต์

การทำงานกับเบรกพอยต์

หากต้องการตั้งค่าเบรกพอยต์ คุณต้องไปที่แท็บ "สคริปต์" และเลือกสคริปต์ที่ต้องการจากรายการ ตอนนี้เรามองหาบรรทัดที่เราต้องขัดจังหวะการทำงานของสคริปต์ และคลิกที่ฟิลด์ที่มีหมายเลขบรรทัดเพื่อเปิดใช้งาน - ตัวบ่งชี้ที่มองเห็นได้จะปรากฏขึ้น ตอนนี้เราโหลดหน้าซ้ำและการเรียกใช้โค้ดจะถูกขัดจังหวะ ณ จุดที่กำหนด:

จากนั้นคุณสามารถดำเนินการโค้ดต่อไปได้โดยใช้ปุ่มพิเศษที่อยู่ด้านบนของแถบด้านข้าง:

จุดพักแบบมีเงื่อนไข

การตั้งค่าเบรกพอยต์ในโค้ด

ไม่สะดวกเสมอไปในการตั้งค่าเบรกพอยต์โดยใช้อินเทอร์เฟซเครื่องมือสำหรับนักพัฒนาในเบราว์เซอร์ บางครั้งการเรียกใช้ดีบักเกอร์จากโค้ดโดยใช้คำสั่งพิเศษจะง่ายกว่า ตัวอย่างด้านล่างแสดงวิธีที่คุณสามารถยกเลิกโค้ดได้เมื่อตรงตามเงื่อนไขบางประการ:

วิธีอื่นในการขัดจังหวะการเรียกใช้โค้ด

หยุดเมื่อ DOM เปลี่ยนแปลง

ในแผงโค้ด HTML เมื่อคุณคลิกขวาที่องค์ประกอบที่ต้องการ คุณสามารถเลือกเงื่อนไขสำหรับการหยุดโค้ด (การเปลี่ยนแอตทริบิวต์ การเพิ่ม/การลบรายการย่อย การลบองค์ประกอบ) เมื่อ DOM เปลี่ยนแปลง โอเวอร์โหลดโค้ดและเมื่อองค์ประกอบเปลี่ยนแปลง การเรียกใช้โค้ดจะหยุดลง

หยุดเมื่อเกิดข้อยกเว้นทั้งหมดหรือที่ไม่สามารถจัดการได้

เครื่องมือสำหรับนักพัฒนาส่วนใหญ่อนุญาตให้คุณหยุดการทำงานของสคริปต์เมื่อมีข้อยกเว้นเกิดขึ้น ใน Chrome คุณสามารถเปิดใช้งานฟังก์ชันนี้ได้โดยใช้ไอคอน "หยุดชั่วคราว" ที่บรรทัดล่างสุดของอินเทอร์เฟซ

วาร์ เสื้อ = 3, p = 1; ฟังก์ชั่น calcPhotos(total_photos, prev_total_photos) ( var Total_photos_diff = Total_photos - prev_total_photos; // กลุ่มแรก console.info("ผลต่างทั้งหมดตอนนี้ " + Total_photos_diff); // อัปเดตค่า t = t+5; p = p+1 ; / / ข้อยกเว้นที่ไม่สามารถจัดการได้ if (total_photos_diff > 300) ( Throw 0; ) // จัดการข้อยกเว้น if (total_photos_diff > 200) ( try ( $$("#noexistent-element").hide(); ) catch(e) ( console.error(e); ) ) setInterval(ฟังก์ชั่น() ( calcPhotos(t,p); ),50);