1. ดีบักเกอร์;
ฉันเคยบอกไปแล้วว่าคุณสามารถเพิ่ม debugger;
ลงในโค้ด JavaScript เพื่อสร้างเอฟเฟกต์เบรกพอยต์ด้วยตนเอง
ต้องการเบรกพอยต์แบบมีเงื่อนไขหรือไม่? คุณเพียงแค่ต้องล้อมรอบมันด้วยคำสั่ง if
:
คัดลอกโค้ด รหัสจะเป็นดังนี้: if (somethingHappens) {
ดีบักเกอร์;
-
แต่อย่าลืมลบออกก่อนที่โปรแกรมจะออก
2. ตั้งค่าเบรกพอยต์เพื่อทริกเกอร์เมื่อโหนด DOM เปลี่ยนแปลงบางครั้งคุณจะพบว่า DOM ไม่ได้อยู่ภายใต้การควบคุมของคุณและจะมีการเปลี่ยนแปลงแปลกๆ ซึ่งทำให้ยากสำหรับคุณที่จะค้นหาสาเหตุของปัญหา
มีฟังก์ชันที่ใช้งานง่ายสุด ๆ ในเครื่องมือพัฒนาของ Google Chrome ที่สามารถจัดการกับสถานการณ์นี้โดยเฉพาะ ที่เรียกว่า "Break on..." คุณสามารถดูรายการเมนูนี้ได้โดยการคลิกขวาที่โหนด DOM
เงื่อนไขการทริกเกอร์ของเบรกพอยต์สามารถตั้งค่าเป็นการลบโหนด การเปลี่ยนแปลงใด ๆ ในแอตทริบิวต์ของโหนด หรือการเปลี่ยนแปลงในโหนดย่อยรายการใดรายการหนึ่ง
3. เบรกพอยต์ของอาแจ็กซ์เบรกพอยต์ XHR หรือเบรกพอยต์ Ajax ตามชื่อของมัน ช่วยให้เราสามารถตั้งค่าเบรกพอยต์ที่ทริกเกอร์การเรียก Ajax เฉพาะเมื่อเกิดขึ้น
เคล็ดลับนี้มีประสิทธิภาพมากเมื่อคุณแก้ไขจุดบกพร่องการรับส่งข้อมูลเครือข่ายสำหรับเว็บแอปพลิเคชัน
4. สภาพแวดล้อมการจำลองอุปกรณ์มือถือGoogle Chrome มีเครื่องมือที่น่าสนใจมากสำหรับการจำลองอุปกรณ์เคลื่อนที่ เพื่อช่วยเราแก้ไขข้อบกพร่องว่าโปรแกรมทำงานบนอุปกรณ์เคลื่อนที่อย่างไร
วิธีค้นหาคือ: กด F12 เพื่อเปิดเครื่องมือสำหรับนักพัฒนาจากนั้นกดปุ่ม ESC
(แท็บปัจจุบันไม่สามารถเป็นคอนโซลได้) คุณจะเห็นหน้าต่างการดีบักชั้นที่สองปรากฏขึ้นและมีอุปกรณ์จำลองต่าง ๆ ใน แท็บการจำลอง
แน่นอนว่าสิ่งนี้ไม่ได้กลายเป็น iPhone จริง แต่เพียงจำลองขนาดของ iPhone กิจกรรมการสัมผัส และค่า User Agent ของเบราว์เซอร์
5. ใช้การตรวจสอบเพื่อปรับปรุงเว็บไซต์ของคุณYSlow เป็นเครื่องมือที่ยอดเยี่ยม เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Google Chrome ยังมีเครื่องมือที่คล้ายกันมากที่เรียกว่า Audits
สามารถตรวจสอบเว็บไซต์ของคุณได้อย่างรวดเร็วและให้คำแนะนำและวิธีการในการเพิ่มประสิทธิภาพเว็บไซต์ของคุณที่เป็นประโยชน์และมีประสิทธิภาพ
มีคนอื่นอีกไหม?ฉันไม่รู้ว่าฉันจะพัฒนาไปอย่างไรหากไม่มีเครื่องมือเหล่านี้ ฉันจะเขียนเคล็ดลับเพิ่มเติมเกี่ยวกับเรื่องนี้ด้วย คอยติดตามโพสต์ล่าสุดของฉันเมื่อฉันรู้