ฉันจะดีบักโค้ด JavaScript ของฉันได้อย่างไร [ปิด]

เมื่อฉันพบว่าฉันมีข้อมูลโค้ดที่มีปัญหาฉันจะแก้ไขจุดบกพร่องได้อย่างไร

Firebugเป็นหนึ่งในเครื่องมือยอดนิยมสำหรับวัตถุประสงค์นี้

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

ฉันจะพูดถึงโซลูชันระดับสูงด้านล่างโดยใช้Firebug เป็นตัวอย่าง :

Firefox

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

เมื่อติดตั้ง Firebug แล้วคุณสามารถเข้าถึงได้ดังนี้:

ประการแรกหากคุณคลิกขวาที่องค์ประกอบใด ๆ คุณสามารถตรวจสอบองค์ประกอบด้วย Firebug :

การคลิกที่นี่จะเป็นการเปิดบานหน้าต่าง Firebug ที่ด้านล่างของเบราว์เซอร์:

Firebug มีคุณสมบัติมากมาย แต่สิ่งที่เราสนใจคือแท็บสคริปต์ การคลิกแท็บสคริปต์จะเปิดหน้าต่างนี้:

เห็นได้ชัดว่าในการดีบักคุณต้องคลิกโหลดซ้ำ :

คุณสามารถเพิ่มเบรกพอยต์ได้แล้วโดยคลิกที่บรรทัดทางด้านซ้ายของโค้ด JavaScript ที่คุณต้องการเพิ่มเบรกพอยต์:

เมื่อเบรกพอยต์ของคุณถูกชนจะมีลักษณะดังนี้:

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

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

โครเมียม

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

Internet Explorer

หากคุณกำลังพัฒนาใน. NETและใช้ Visual Studio โดยใช้สภาพแวดล้อมการพัฒนาเว็บคุณสามารถดีบักโค้ด JavaScript ได้โดยตรงโดยการวางเบรกพอยต์ ฯลฯ โค้ด JavaScript ของคุณจะเหมือนกับว่าคุณกำลังดีบัก C # หรือVB.NETโค้ด

หากคุณไม่มีสิ่งนี้ Internet Explorer ยังมีเครื่องมือทั้งหมดที่แสดงไว้ด้านบน รำคาญแทนมีคลิกขวาตรวจสอบองค์ประกอบคุณสมบัติของ Chrome หรือ Firefox คุณสามารถเข้าถึงเครื่องมือสำหรับนักพัฒนาโดยการกดF12 คำถามนี้ครอบคลุมประเด็นส่วนใหญ่

• Internet Explorer 8 (เครื่องมือสำหรับนักพัฒนา - F12) สิ่งอื่นใดคืออัตราที่สองในที่ดินของ Internet Explorer
• Firefox และFirebug กดF12เพื่อแสดง
• Safari (แสดงแถบเมนูการตั้งค่า -> ขั้นสูง -> แสดงแถบเมนูการพัฒนา )
• คอนโซล Google Chrome JavaScript ( F12หรือ ( Ctrl+ Shift+ J)) ส่วนใหญ่เป็นเบราว์เซอร์เดียวกับ Safari แต่ Safari ดีกว่า IMHO
• Opera ( เครื่องมือ -> ขั้นสูง -> เครื่องมือสำหรับนักพัฒนา )

มีคีย์เวิร์ดดีบักเกอร์ใน JavaScript เพื่อดีบักโค้ด JavaScript ใส่debugger;ข้อมูลโค้ดในโค้ด JavaScript ของคุณ จะเริ่มการดีบักโค้ด JavaScript โดยอัตโนมัติ ณ จุดนั้น

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

สมมติว่านี่คือไฟล์test.jsของคุณ

function func(){
    //Some stuff
    debugger;  //Debugging is automatically started from here
    //Some stuff
}
func();

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

ฉันใช้ของดีเก่า printfแนวทาง (เป็นเทคนิคโบราณที่ใช้ได้ผลดีในทุกเวลา)

มองไปที่เวทมนตร์%o:

console.log("this is %o, event is %o, host is %s", this, e, location.host);

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

และนี่:

console.log("%s", new Error().stack);

ให้การติดตามสแต็กเหมือน Java ไปยังจุดnew Error()เรียกใช้ (รวมถึงเส้นทางไปยังไฟล์และหมายเลขบรรทัด !!)

ทั้งสอง%oและnew Error().stackพร้อมใช้งานใน Chrome และ Firefox

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

นอกจากนี้สำหรับการติดตามสแต็กให้ใช้:

console.trace();

ตามที่พูด คอนโซล

แฮ็คแฮ็ค!

เริ่มต้นด้วย Firebug และ IE Debugger

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

ตัวอย่าง:

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

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

แม้ว่าจะใช้alert(msg);งานได้ในสถานการณ์ "ฉันแค่ต้องการค้นหาว่าเกิดอะไรขึ้น" ก็ตาม... นักพัฒนาทุกคนต่างก็พบเจอกับกรณีที่คุณอยู่ในวงวน (ใหญ่มากหรือไม่มีที่สิ้นสุด) ที่คุณไม่สามารถแยกออกได้

ฉันขอแนะนำว่าในระหว่างการพัฒนาหากคุณต้องการตัวเลือกการดีบักแบบเห็นหน้าให้ใช้ตัวเลือกการดีบักที่ช่วยให้คุณแยกออกได้ (PS Opera, Safari? และ Chrome ทั้งหมดนี้มีอยู่ในกล่องโต้ตอบดั้งเดิม)

//global flag
_debug = true;
function debug(msg){
  if(_debug){
    if(!confirm(msg + '\n\nPress Cancel to stop debugging.')){
      _debug = false;
    }
  }
}

ด้วยวิธีการข้างต้นคุณจะทำให้ตัวเองเข้าสู่การแก้ไขจุดบกพร่องป๊อปอัปจำนวนมากโดยการกดEnter/ Okช่วยให้คุณข้ามผ่านแต่ละข้อความ แต่การกดEscape/ Cancelช่วยให้คุณแยกออกได้อย่างสวยงาม

ฉันใช้เมนู / คอนโซลนักพัฒนาของ WebKit (Safari 4) เกือบจะเหมือนกับ Firebug

console.log()เป็นสีดำใหม่ - ดีกว่าalert()มาก

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

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

ฉันใช้เครื่องมือสองสามอย่าง: Fiddler , Firebug และ Visual Studio ฉันได้ยินว่า Internet Explorer 8 มีดีบักเกอร์ในตัวที่ดี

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

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

ฉันพบว่า Internet Explorer 8 เวอร์ชันใหม่ (กดF12) ดีมากในการดีบักโค้ด JavaScript

แน่นอนว่าFirebugนั้นดีถ้าคุณใช้ Firefox

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

ฉันใช้Venkmanซึ่งเป็นโปรแกรมดีบัก JavaScript สำหรับแอปพลิเคชันXUL

นอกเหนือจาก Firebug และส่วนขยายสำหรับนักพัฒนาบนเบราว์เซอร์แล้วJetBrains WebStorm IDE ยังมาพร้อมกับการสนับสนุนการดีบักระยะไกลสำหรับ Firefox และ Chrome (จำเป็นต้องมีส่วนขยาย) ในตัว

ยังรองรับ:

• Coffescript: วิธีการดีบัก coffeescript ใน node.js ด้วยแผนที่ต้นทางของ webstorm 6
• Node.js

ตัวเลือกในการทดสอบฟรีคือการทดลองใช้ 30 ครั้งหรือใช้เวอร์ชันระหว่างการพัฒนา

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

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

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

Firebug Console API: http://getfirebug.com/console.html

การกดF12นักพัฒนาเว็บสามารถแก้จุดบกพร่องโค้ด JavaScript ได้อย่างรวดเร็วโดยไม่ต้องออกจากเบราว์เซอร์ มีอยู่ในทุกการติดตั้ง Windows

ในInternet Explorer 11 , เครื่องมือ F12มีเครื่องมือเช่นจุดพัก, นาฬิกาและการดูตัวแปรท้องถิ่นและคอนโซลสำหรับข้อความและโค้ดได้ทันทีแก้จุดบกพร่อง