คำแนะนำโดยละเอียดเกี่ยวกับการดีบักโค้ด JavaScript ใน Chrome Devtools การดีบัก JavaScript สมัยใหม่

การดีบัก js และ css

ในตอนแรก ฉันต้องการอุทิศบทความนี้เฉพาะในส่วนที่เกี่ยวข้องกับการดีบักสคริปต์ js เท่านั้น แต่หลังจากเขียนแล้ว ปรากฎว่าปัญหาของการดีบัก CSS มีความเกี่ยวข้องอย่างมากกับดีบักเกอร์เดียวกันนี้ ดังนั้นการสร้างบทความแยกต่างหากเกี่ยวกับการดีบัก CSS จึงไม่สมเหตุสมผล

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

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

สำหรับแต่ละเบราว์เซอร์จะมีเครื่องมือพิเศษสำหรับการดีบักสคริปต์ JS และในเวลาเดียวกันการดีบัก CSS เครื่องมือเหล่านี้เป็นยูทิลิตี้พิเศษที่เขียนขึ้นสำหรับเบราว์เซอร์เฉพาะ ดังนั้น คุณจะต้องดีบักสคริปต์ js ของคุณภายใต้เบราว์เซอร์เดียวเท่านั้น เนื่องจากแต่ละเบราว์เซอร์มียูทิลิตี้ของตัวเอง

เบราว์เซอร์	เครื่องมือสำหรับการดีบักสคริปต์ js
	ไฟร์บั๊ก
	Firebug Lite Dragonfly Opera 9.5 และสูงกว่า
	Firebug Lite นอกจากนี้ยังมีเครื่องมือที่ทรงพลังมากสำหรับการพัฒนาและการดีบัก MS Visual Studio แต่เครื่องมือนี้ช้ามากและสามารถสร้างข้อผิดพลาดได้ภายใน 5-7 วินาที IE 8 มีเครื่องมือสำหรับนักพัฒนาในตัว (IE 7 มีโหมดจำลองสำหรับการดีบัก)

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

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

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

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

นอกจากนี้ Firebug ยังช่วยให้คุณติดตามคำขอ ajax ดูส่วนหัวการตอบกลับ และประเมินเวลาคำขออีกครั้ง

นอกเหนือจากทุกสิ่งทุกอย่าง Firebug ยังมีบรรทัดคำสั่งซึ่งสามารถขยายเป็นหน้าต่างขนาดใดก็ได้หากต้องการและในนั้นคุณสามารถเขียนสดและรันโค้ด js ได้ทันที
นักพัฒนา Firebug ได้สร้าง Firebug Lite เวอร์ชันพิเศษ ซึ่งช่วยให้คุณสามารถดีบักสคริปต์ js ในเบราว์เซอร์หลักอื่นๆ ทั้งหมด (Opera, IE, Safari) จริงอยู่เวอร์ชันนี้ลดทอนลงเล็กน้อย แต่ก็ยังดีกว่าไม่มีเลย นอกเหนือจากการดีบักสคริปต์ js แล้ว ยังมีการดีบัก CSS และโครงสร้างหน้า DOM อีกด้วย การดำเนินการเหตุการณ์ js (onclick, onmousemove ฯลฯ) ช่วยให้คุณสามารถติดตามการเปลี่ยนแปลงในโค้ด HTML ของเพจและ DOM ของเอกสารแบบเรียลไทม์ ส่วนที่เปลี่ยนแปลงของโค้ด html จะถูกเน้นทันที
หากคุณเลือกองค์ประกอบของหน้าและคลิกที่แท็บ "เค้าโครง" คุณจะสามารถดูได้ว่าองค์ประกอบนั้นวางตำแหน่งอย่างไรบนหน้า และแท็บ "สไตล์" จะแสดงคุณสมบัติที่ใช้งานอยู่และที่ถูกแทนที่ทั้งหมดขององค์ประกอบนั้น (ขีดทับผ่าน คุณสมบัติ).

คุณสมบัติถูกแทนที่ด้วยค่าที่ตั้งไว้ล่าสุดโดยอิงตามลำดับความสำคัญของปลายทาง

โอเปร่าแมลงปอ

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

ที่จริงแล้ว การดีบักสคริปต์ js ใน Dragonfly เป็นเพียงการทำซ้ำข้อมูลข้อผิดพลาดใน “Error Console” ในคอนโซลของ Dragonfly นั่นเอง

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

ในขณะที่ Firebug ในแท็บ "แสดงสไตล์จากการคำนวณ" จะแสดงคุณสมบัติทั้งหมดโดยไม่มีการออกแบบสี อย่างไรก็ตาม เมื่อเปรียบเทียบกับ Firebug การเปลี่ยนแปลงคุณสมบัติ CSS และการดูการเปลี่ยนแปลงแบบเรียลไทม์นั้นเป็นไปไม่ได้ใน Dragonfly ต่างจาก Firebug ตรงที่ Dragonfly ไม่มีคุณสมบัติพิเศษใด ๆ สำหรับการดีบักสคริปต์ js นอกจากนี้ยังมีการแสดงคำขอ Ajax, ส่วนหัวของการแลกเปลี่ยนข้อมูลระหว่างไคลเอ็นต์และเซิร์ฟเวอร์, เวลาคำขอ อย่างไรก็ตาม จะระบุเฉพาะเวลาเต็มของคำขอเท่านั้นโดยไม่มีรายละเอียด เมื่อทำงานกับ Dragonfly คุณจะรู้สึกว่ามันช้าลงเล็กน้อย การเปรียบเทียบประสิทธิภาพของคอนโซลแสดงให้เห็นว่า Dragonfly ยังคงกดดันโปรเซสเซอร์มากขึ้นแม้ว่าจะเพียงเล็กน้อยก็ตาม

ข้อเสียรวมถึงความจริงที่ว่าไม่ได้จัดทำโปรไฟล์ไว้สำหรับการดีบักสคริปต์ js

เครื่องมือสำหรับนักพัฒนา IE

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

คุณสมบัติที่ไม่พบในดีบักเกอร์อื่น ได้แก่ :
- ความสามารถในการเปลี่ยนขนาดหน้าให้พอดีกับส่วนขยายยอดนิยม (1024x768, 1280x768, 1280x1024 และอื่น ๆ )
- เมื่อทำโปรไฟล์ "การสร้าง/หยุดโปรไฟล์" ชื่อของฟังก์ชัน จำนวนการโทร และเวลาดำเนินการของฟังก์ชันเหล่านี้ในช่วงเวลาหนึ่งสามารถแสดงในรูปแบบของแผนผังได้ สิ่งนี้ช่วยให้คุณติดตามลำดับและการซ้อนของการเรียกใช้ฟังก์ชันได้อย่างสะดวก Firebug อนุญาตให้คุณแสดงรายการทั่วไปของฟังก์ชันที่เรียกว่าเท่านั้น
- ฟังก์ชั่น "มุมมอง -> แหล่งที่มา -> ซอร์สโค้ดขององค์ประกอบที่มีสไตล์" จะแสดงโค้ด html ขององค์ประกอบที่เลือกพร้อมกับสไตล์ CSS ทั้งหมดในหน้าต่างแยกต่างหาก สิ่งนี้มีประโยชน์อย่างยิ่งหากคุณจำเป็นต้องนำส่วนหนึ่งของหน้าจากไซต์อื่นไปพร้อมกับสไตล์ CSS โดยฉับพลัน
ข้อเสียคือข้อเท็จจริงที่ว่า IE Developer Tools ไม่มีแผงสำหรับติดตามคำขอ ดังนั้นคุณจะไม่สามารถติดตามจำนวนคำขอและความเร็วในการโหลดได้
ดังที่คุณทราบ IE เป็นเบราว์เซอร์ที่ช้ากว่าข้อกำหนด เมื่อออกแบบการออกแบบ IE ต้องการความสนใจมากที่สุดและค้นหาวิธีแก้ไขปัญหาสำหรับการแสดงองค์ประกอบของหน้าที่ถูกต้อง ดังนั้นข้อดีอย่างมากของเครื่องมือสำหรับนักพัฒนา IE ก็คือความสามารถในการตรวจสอบความเข้ากันได้ของหน้าใน IE 7

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

คุณคงคุ้นเคยกับดีบักเกอร์หลักของสคริปต์ js และ CSS แล้ว ฉันไม่เห็นประเด็นในการอธิบายให้ละเอียดกว่านี้เพราะคุณสมบัติส่วนใหญ่มักจะไม่ได้ใช้ ตัวดีบั๊กทั้งหมดมีอินเทอร์เฟซภาษารัสเซียและคุณสามารถเข้าใจรายละเอียดที่ขาดหายไปได้ด้วยตัวเองโดยไม่ยาก ขอให้โชคดีกับคุณ

1074

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

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

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

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

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

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

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

พื้นที่ไฟล์ต้นฉบับ ประกอบด้วยไฟล์โครงการทั้งหมด

พื้นที่ข้อความ บริเวณนี้มีข้อความของไฟล์

พื้นที่ข้อมูลและการควบคุม เราจะพูดถึงเธอในภายหลัง

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

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

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

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

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

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

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

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

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

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

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

คุณสมบัติเพิ่มเติมบางอย่าง

• เบรกพอยต์สามารถเริ่มต้นได้โดยตรงจากสคริปต์โดยใช้คำสั่งดีบักเกอร์: function pow(x, n) ( ... debugger; // 300) ( debugger; // เปิดตัวดีบักเกอร์และขัดจังหวะการเรียกใช้โค้ด)
  วิธีอื่นในการขัดจังหวะการทำงานของโค้ด

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

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

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

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

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

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

  

  คุณสามารถเลือกข้อยกเว้นที่จะหยุดการเรียกใช้โค้ดได้ ตัวอย่างด้านล่างแสดงให้เห็นถึงข้อยกเว้นที่ไม่สามารถจัดการได้หนึ่งรายการ และข้อยกเว้นที่ได้รับการจัดการหนึ่งรายการ (ลอง|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) ( try ( $$("#noexistent-element").hide(); ) catch(e) ( console.error(e); ) ) setInterval(ฟังก์ชั่น() ( calcPhotos(t,p); ),50);

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

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

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

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

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

  

  บทสรุป

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

  ลองนึกภาพว่าคุณกำลังทำงานกับเว็บแอปพลิเคชันใหม่ที่น่าทึ่งนี้ และผู้ทดสอบของคุณขอให้คุณแก้ไขข้อบกพร่องต่อไปนี้:

• ข้อความแถบสถานะ "กำลังโหลด..." จะไม่หายไปเมื่อโหลดแอปพลิเคชันเสร็จแล้ว
• ภาษาเริ่มต้นคือภาษานอร์เวย์ แม้แต่ใน IE และ Firefox เวอร์ชันภาษาอังกฤษก็ตาม
• ที่ไหนสักแห่งในโค้ดที่มีการสร้างเสาตัวแปรส่วนกลางขึ้น
• ด้วยเหตุผลบางประการ องค์ประกอบทั้งหมดในโปรแกรมดู DOM จึงมีแอตทริบิวต์ "clone"
กำลังรันดีบักเกอร์
• ใน Firefox คุณต้องตรวจสอบให้แน่ใจว่าคุณได้ติดตั้งส่วนขยาย Firebug แล้ว เลือก “เครื่องมือ > Firebug > เปิด Firebug”
• ใน Opera 9.5+ ให้เลือก “เครื่องมือ > ขั้นสูง > เครื่องมือการพัฒนา”
• ใน IE เบต้า ให้ไปที่ “เครื่องมือ > แผง > แถบ Explorer > แถบเครื่องมือนักพัฒนา IE”
• ใน Safari หรือ WebKit ขั้นแรกให้เปิดใช้งานเมนูแก้ไขข้อบกพร่อง (1) จากนั้นเลือก “พัฒนา > แสดง Web Inspector”
ถึงเวลาเปิดตัวดีบักเกอร์แล้ว เนื่องจากคำแนะนำบางอย่างจำเป็นต้องเปลี่ยนแปลงโค้ด คุณอาจต้องการบันทึกหน้าทดสอบและโหลดจากดิสก์ในเบราว์เซอร์ของคุณ ข้อผิดพลาด #1: ข้อความ "กำลังโหลด..." หากคุณดูที่แอปพลิเคชันที่คุณกำลังแก้ไขข้อบกพร่อง คุณจะเห็นอะไรเป็นอันดับแรก แสดงในรูปที่ 1


ข้าว. 1: มุมมองเริ่มต้นของแอปพลิเคชัน JavaScript ของเราใน Dragonfly และ Firebug ตามลำดับ

เมื่อคุณดูซอร์สโค้ดในตัวดีบักเกอร์ ให้สังเกตฟังก์ชัน clearLoadingMessage() ที่จุดเริ่มต้นของโค้ด นี่เป็นสถานที่ที่ดีสำหรับจุดตรวจ

วิธีการติดตั้ง:

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

เมื่อโหลดหน้าใหม่ สคริปต์จะหยุดทำงานและคุณจะเห็นสิ่งที่แสดงในรูปที่ 2


ข้าว. 2: ตัวดีบักเกอร์หยุดที่จุดพักภายใน clearLoadingMessage

มาดูโค้ดฟังก์ชันกันดีกว่า อย่างที่คุณเห็นได้อย่างง่ายดาย มันอัปเดตองค์ประกอบ DOM สองรายการ และบรรทัดที่ 31 กล่าวถึงแถบสถานะ ดูเหมือนว่า getElements("p", ("class": "statusbar")).innerHTML จะมองหาองค์ประกอบแถบสถานะในแผนผัง DOM เราจะทดสอบสมมติฐานของเราอย่างรวดเร็วได้อย่างไร?

วางคำสั่งนี้ลงในบรรทัดคำสั่งเพื่อทดสอบ รูปที่สามแสดงภาพหน้าจอสามภาพ (Dragonfly, Firebug และ IE8) หลังจากอ่าน HTML ภายในหรือ HTML ภายนอกขององค์ประกอบที่ส่งคืนโดยคำสั่งที่คุณกำลังตรวจสอบ

หากต้องการตรวจสอบ ให้ทำดังต่อไปนี้:

• ค้นหาบรรทัดคำสั่ง:
  * ใน Firebug ให้สลับไปที่แท็บ "คอนโซล"
  * ใน Dragonfly ให้ดูด้านล่างแผงโค้ด JavaScript
  * ใน IE8 ให้ค้นหาแท็บ "คอนโซล" ทางด้านขวา
• วาง getElements("p", ("class": "statusbar")).innerHTML ลงในบรรทัดคำสั่ง
• กดปุ่มตกลง.



ข้าว. 3: ส่งออกผลลัพธ์คำสั่งใน Dragonfly, Firebug และ IE8 ตามลำดับ

Command Line เป็นเครื่องมือที่มีประโยชน์มากที่ช่วยให้คุณทดสอบโค้ดชิ้นเล็กๆ ได้อย่างรวดเร็ว การรวมคอนโซล Firebug มีประโยชน์มาก - หากคำสั่งของคุณส่งออกวัตถุ คุณจะได้รับมุมมองที่ชาญฉลาดมาก ตัวอย่างเช่น หากเป็นวัตถุ DOM คุณจะเห็นผลลัพธ์ที่มาร์กอัป

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

• รับการอ้างอิงถึงองค์ประกอบแถบสถานะ
• ค้นหา firstChild หรืออีกนัยหนึ่งคือโหนดแรกในย่อหน้านี้
• ตั้งค่าคุณสมบัติข้อความภายใน
มาลองเรียกใช้บางสิ่งที่มากกว่าคำสั่งก่อนหน้าในคอนโซล ตัวอย่างเช่น คุณสามารถลองค้นหาว่าค่าปัจจุบันของคุณสมบัติ innerText คืออะไร ก่อนที่จะกำหนดค่าใหม่ให้กับคุณสมบัตินั้น หากต้องการทราบ คุณสามารถพิมพ์คำสั่งทั้งหมดจนถึงเครื่องหมาย "=" ลงในบรรทัดคำสั่ง: getElements("p" , ("class" :"statusbar" )).firstChild.innerText

เซอร์ไพรส์ตอนจบ...ไม่มีอะไรเลย ดังนั้น นิพจน์ getElements("p",("class:"statusbar")).firstChild ชี้ไปที่วัตถุบางอย่างใน DOM ที่ไม่มีข้อความใดๆ หรือไม่มีคุณสมบัติ innerText

คำถามต่อไปคือ ลูกคนแรกของย่อหน้าคืออะไร? ลองถามคำถามนี้ที่บรรทัดคำสั่ง (ดูภาพที่สี่)

ข้าว. 4: บรรทัดคำสั่งดีบักเกอร์ StDragonfly เอาต์พุต [วัตถุข้อความ]

เอาต์พุตดีบักเกอร์ของ Dragonfly - [วัตถุข้อความ] แสดงว่านี่คือโหนดข้อความ DOM ดังนั้นเราจึงพบสาเหตุของปัญหาแรก โหนดข้อความไม่มีคุณสมบัติ InnerText ดังนั้นการตั้งค่า p.firstChild.innerText ให้เป็นค่าจึงไม่ทำอะไรเลย ข้อผิดพลาดนี้สามารถแก้ไขได้ง่ายๆ โดยการแทนที่ InnerText ด้วย nodeValue ซึ่งเป็นคุณสมบัติที่กำหนดโดยมาตรฐาน W3C สำหรับโหนดข้อความ

ตอนนี้เราได้จัดการกับข้อผิดพลาดแรกแล้ว:

• คลิกหรือปุ่มเรียกใช้เพื่อสิ้นสุดสคริปต์
• อย่าลืมรีเซ็ตจุดตรวจที่ตั้งไว้โดยคลิกที่หมายเลขบรรทัดอีกครั้ง
ข้อผิดพลาดที่สอง: ปัญหาการกำหนดภาษา คุณอาจสังเกตเห็นตัวแปร lang;/*ภาษา*/ ที่จุดเริ่มต้นของสคริปต์ อาจสงสัยว่าโค้ดที่ตั้งค่าของตัวแปรนี้เป็นสาเหตุของปัญหา คุณสามารถลองค้นหาโค้ดนี้โดยใช้ฟังก์ชันการค้นหาที่มีอยู่ในตัวดีบักเกอร์ ใน Dragonfly การค้นหาจะอยู่เหนือโปรแกรมดูโค้ดใน Firebug - ที่มุมขวาบน (ดูรูปที่ 5)

หากต้องการค้นหาว่าปัญหาการแปลเป็นภาษาท้องถิ่นน่าจะเกิดขึ้นที่ใด ให้ทำดังต่อไปนี้:

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


ข้าว. 5: ค้นหาใน Dragonfly และ WebInspector

หากต้องการตรวจสอบว่าฟังก์ชันนี้ทำอะไร:

• คลิกปุ่ม "ก้าวเข้าสู่" เพื่อเข้าสู่ฟังก์ชัน getLanguage
• กดซ้ำแล้วซ้ำอีกเพื่อรันโค้ดทีละขั้นตอน
• ในหน้าต่างการดูตัวแปร ดูว่าค่าเปลี่ยนแปลงไปอย่างไร
เมื่อคุณเข้าสู่ฟังก์ชัน คุณจะเห็นความพยายามที่จะอ่านภาษาจากสตริงตัวแทนผู้ใช้ของเบราว์เซอร์โดยการวิเคราะห์ navigator.userAgent
var str1 = navigator.userAgent.match(/\((.*)\)/);
var ar1 = str1.split(/\s*;\s*/), lang;
สำหรับ (var i = 0; i< ar1.length; i++){
ถ้า (ar1[i].ตรงกัน(/^(.(2))$/))(
หลาง = ar1[i];
}
}

เมื่อคุณอ่านโค้ดของคุณ คุณสามารถใช้ Local Variables Viewer ได้ รูปที่ 6 แสดงให้เห็นว่ามีลักษณะอย่างไรใน Firebug และ IE8 DT เราขยายอาร์เรย์ ar1 เพื่อดูองค์ประกอบต่างๆ

ข้าว. 6: บานหน้าต่างเพื่อดูตัวแปรในเครื่องของฟังก์ชัน getLanguage ใน Firebug IE8

นิพจน์ ar1[i].match(/^(.(2))$/) เพียงค้นหาสตริงที่ประกอบด้วยอักขระสองตัว เช่น "no", "en" อย่างไรก็ตาม อย่างที่คุณเห็นในภาพหน้าจอใน Firefox ข้อมูลเกี่ยวกับภาษานั้นจะแสดงในรูปแบบ “nn-NO” (2) IE ไม่ได้ใส่ข้อมูลภาษาลงในตัวแทนผู้ใช้เลย

ดังนั้นเราจึงพบข้อผิดพลาดที่สอง: ภาษาถูกกำหนดโดยการค้นหารหัสตัวอักษรสองตัวในบรรทัดตัวแทนผู้ใช้ แต่ Firefox มีการกำหนดภาษาห้าอักขระและ IE ไม่มีเลย โค้ดดังกล่าวจะต้องถูกเขียนใหม่และแทนที่ด้วยการตรวจจับภาษาทั้งบนฝั่งเซิร์ฟเวอร์โดยใช้ส่วนหัว Accept-Language HTTP หรือโดยการดึงข้อมูลจาก navigator.language (navigator.userLanguage สำหรับ IE) นี่คือตัวอย่างของฟังก์ชันดังกล่าวที่สามารถเป็นได้

ฟังก์ชั่น getLanguage() (
หลาง;

ถ้า (navigator.ภาษา) (
lang = นาวิเกเตอร์.ภาษา;
) อื่นถ้า (navigator.userLanguage) (
lang = navigator.userLanguage;
}

ถ้า (lang && lang.length > 2) (
lang = lang.substring(0, 2);
}

กลับหลา;
}



ข้อผิดพลาดที่สาม: ตัวแปร "prop" ลึกลับ
ข้าว. 7: ตัวแปรเสาหลักสามารถมองเห็นได้ในแผงมุมมองตัวแปร Firebug และ Dragonfly

ในรูปที่ 7 คุณสามารถมองเห็นตัวแปร “prop” ได้อย่างชัดเจน ในแอปพลิเคชันที่เขียนอย่างดี ควรรักษาจำนวนตัวแปรส่วนกลางให้น้อยที่สุด เนื่องจากอาจทำให้เกิดปัญหาได้ เช่น เมื่อสองส่วนของแอปพลิเคชันต้องการใช้ตัวแปรเดียวกัน สมมติว่าพรุ่งนี้อีกทีมจะเพิ่มคุณสมบัติใหม่ให้กับแอปพลิเคชันของเราและประกาศตัวแปร "prop" ด้วย เราจะได้โค้ดแอปพลิเคชันสองชิ้นที่แตกต่างกันโดยใช้ชื่อเดียวกันสำหรับสิ่งต่าง ๆ สถานการณ์นี้มักนำไปสู่ความขัดแย้งและข้อผิดพลาด คุณสามารถลองค้นหาตัวแปรนี้และประกาศให้เป็นตัวแปรในเครื่องได้ เมื่อต้องการทำเช่นนี้ คุณสามารถใช้การค้นหาเหมือนที่เราทำในกรณีก่อนหน้านี้ แต่มีวิธีที่ชาญฉลาดกว่า...

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

__defineSetter__("prop" , ฟังก์ชั่น () ( ดีบักเกอร์; ));

ทำสิ่งต่อไปนี้:
• เพิ่มโค้ดการดีบักที่จุดเริ่มต้นของสคริปต์แรก
• โหลดหน้านี้ซ้ำ
• สังเกตว่าการดำเนินการสคริปต์ถูกขัดจังหวะอย่างไร
IE8 DT มีแท็บ "รับชม" แต่จะไม่มีการหยุดชะงักเมื่อมีการเปลี่ยนแปลงตัวแปร ตัวอย่างนี้ใช้ได้กับ Firefox, Opera และ Safari เท่านั้น

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

สำหรับ (prop ในคุณลักษณะ) (
ถ้า (el.getAttribute(prop) != คุณลักษณะ) includeThisElement = false ;


มันง่ายที่จะสังเกตเห็น for loop ซึ่งมีการประกาศตัวแปร prop โดยไม่มีคีย์เวิร์ด var เช่น ทั่วโลก. การแก้ไขนี้ไม่ใช่เรื่องยาก เพียงเพิ่ม var และแก้ไขข้อผิดพลาด ข้อผิดพลาดที่สี่: แอตทริบิวต์ "โคลน" ซึ่งไม่ควรอยู่ที่นั่น เห็นได้ชัดว่าผู้ทดสอบขั้นสูงค้นพบข้อผิดพลาดที่สี่โดยใช้ตัวตรวจสอบ DOM เนื่องจากการมีอยู่ของมันไม่ปรากฏใน ในส่วนติดต่อผู้ใช้ของแอปพลิเคชันแต่อย่างใด หากเราเปิดตัวตรวจสอบ DOM (ใน Firebug นี่คือแท็บ "HTML" ใน Dragonfly เรียกว่า "DOM") เราจะเห็นว่าองค์ประกอบหลายอย่างมีคุณลักษณะโคลนซึ่งไม่ควรอยู่ที่นั่น

ข้าว. 8: ตัวตรวจสอบ DOM ของ Dragonfly แสดงรหัสที่มีปัญหา

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

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

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


var funcSetAttr = Element.prototype.setAttribute; /* บันทึกการอ้างอิงถึงวิธีการของระบบ */
Element.prototype.setAttribute = ฟังก์ชั่น (ชื่อ, ค่า) (
ถ้า (ชื่อ == "โคลน" ) (
ดีบักเกอร์; /* หยุดสคริปต์ */
}
funcSetAttr.call (นี่คือ ชื่อ ค่า); /* เรียกใช้เมธอดระบบที่บันทึกไว้ก่อนหน้านี้เพื่อให้ตั้งค่าคุณสมบัติปกติได้อย่างถูกต้อง */
};

ดังนั้นเราจึงดำเนินการดังต่อไปนี้:
• เพิ่มโค้ดต่อไปนี้ที่จุดเริ่มต้นของสคริปต์แรกบนเพจ
• โหลดหน้านี้ซ้ำ
หลังจากรีบูต สคริปต์จะเริ่มประมวลผลแผนผัง DOM แต่หยุดทันทีที่มีการตั้งค่าแอตทริบิวต์ "ไม่ดี" (โปรดทราบว่าใน Firefox เวอร์ชันปัจจุบัน การใช้งาน setAttribute จะแตกต่างกันไปสำหรับองค์ประกอบที่แตกต่างกัน โค้ดด้านบนจะทำงานตามที่คาดหวังใน Opera เสมอ เพื่อให้ได้ผลแบบเดียวกันใน Firefox คุณสามารถแทนที่คำว่า Element ด้วย HTMLFormElement เพื่อแทนที่คำที่เฉพาะเจาะจงมากขึ้น วิธีการ HTMLFormElement.prototype.setAttribute)

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


ข้าว. 9: โทรสแต็กใน Dragonfly และ IE8

รูปที่ 10 แสดงสแต็กใน Firebug ในบรรทัด" setAttribute