F12 ของ DevTools Showdown Edge เทียบกับ Firefox และ Chrome

เครื่องมือสำหรับนักพัฒนาของ Microsoft Edge เบราว์เซอร์เริ่มต้นใหม่ของ Windows 10 ได้รับการออกแบบที่ทันสมัยและมีคุณสมบัติใหม่ไม่กี่เมื่อเทียบกับรุ่นก่อนเครื่องมือ F12 Dev ของ Internet Explorer 11.

คำถามที่ว่าเครื่องมือ dev ของ Microsoft Edge นั้นวัดได้ตามคู่แข่งยอดนิยมหรือไม่ - เครื่องมือ dev ในเบราว์เซอร์สมัยใหม่อื่น ๆ เช่น Mozilla Firefox และ Google Chrome - เกิดขึ้นในใจของนักพัฒนาจำนวนมาก.

ในโพสต์นี้เราพยายามตอบคำถามนี้และหาว่าเครื่องมือ Dev ของ F12 นั้นมีค่าควรใช้หรือไม่ เราจะเปรียบเทียบคุณสมบัติกับเครื่องมือนักพัฒนาซอฟต์แวร์ของ Firefox และ DevTools ของ Google Chrome.

เปิดเครื่องมือ Dev

การกด F12 จะเปิดเครื่องมือของนักพัฒนาซอฟต์แวร์ทั้ง 3 กรณี: เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ใน Firefox, DevTools ใน Chrome และเครื่องมือ Dev F12 ใน Microsoft Edge นี่คือแป้นพิมพ์ลัดที่ ชื่ออย่างเป็นทางการของ Edge F12 Dev Tools มาจาก.

เมื่อคุณเปิดเครื่องมือ Dev ของ Edge คุณจะได้พบกับข้อบกพร่องที่เป็นที่รู้จักมากที่สุดในขณะนี้: ไม่สามารถตรึงเครื่องมือกับหน้าต่างที่มีอยู่. ในขณะที่คุณสามารถติดตามสิ่งที่เกิดขึ้นบนหน้าจอในเครื่องมือสำหรับนักพัฒนา Firefox และ Chrome DevTools โดยการตรึงหน้าต่างเครื่องมือ dev ที่ด้านล่างของหน้าจอคุณ (ปัจจุบัน) ไม่สามารถทำเช่นเดียวกันกับ Edge.

นักพัฒนาของ Microsoft อ้างว่าพวกเขาจะแก้ไขปัญหานี้ในการปรับปรุงในอนาคต.

ตรวจสอบ DOM

DOM Explorer เครื่องมือ (ทางลัด: CTRL + 1) เป็นแท็บแรกของเครื่องมือ F12 Dev ของ Microsoft Edge รูปแบบและการออกแบบโดยรวมค่อนข้างคล้ายกับ ธาตุ แท็บของ Chrome และ ผู้ตรวจการ แท็บใน Firefox อย่างไรก็ตามความสามารถแตกต่างกันอย่างเห็นได้ชัด.

ใน Edge คุณสามารถดูเอกสาร HTML ที่แสดงผลรูปแบบ CSS ที่เกี่ยวข้องและตัวจัดการเหตุการณ์ที่ลงทะเบียนในแต่ละองค์ประกอบ นอกจากนี้คุณยังสามารถค้นหากราฟิกขนาดเล็กเกี่ยวกับรูปแบบกล่อง CSS ด้วยค่าที่คำนวณซึ่งเป็นที่รู้จักกันดีจากเบราว์เซอร์คู่แข่งทั้งสอง.

คุณสามารถ ทดลองกับกฎ CSS โดยการลบรายการปัจจุบันและเพิ่มรายการใหม่และคุณจะเห็น สรุปการเปลี่ยนแปลง บนแท็บย่อยแยกที่เรียกว่า “การเปลี่ยนแปลง” (มันอยู่ทางซ้ายมือ) อันหลังนี้เป็นคุณสมบัติที่ไม่ได้สร้างใน Firefox Developer และ Chrome DevTools สามารถให้ผู้ใช้สรุปได้อย่างรวดเร็วดังนั้นจึงเป็นตัวเลือกที่มีประโยชน์จริงๆ.

มีคุณสมบัติบางอย่างในเครื่องมือสำหรับนักพัฒนา Firefox ที่ไม่ได้ใช้ Edge หรือ Google Chrome ในปัจจุบัน แต่สามารถช่วยชีวิตนักออกแบบได้อย่างมาก: เครื่องมือวิเคราะห์ฟอนต์และภาพเคลื่อนไหว.

ใน Edge มี ตัวเลือกสีเย็น แม้ว่ามันอาจชดเชยผู้ใช้.

โต้ตอบกับ JavaScript

ปลอบใจ แท็บ (ทางลัด: CTRL + 2) ใน Microsoft Edge ช่วยให้คุณสามารถโต้ตอบกับ JavaScript ของไซต์ของคุณเช่นเดียวกับใน Firefox และ Chrome Dev Tools ทั้งสามช่วยให้คุณสามารถติดตามข้อผิดพลาด JavaScript ในเวลาจริงและคุณยังสามารถวิเคราะห์ได้โดยการป้อนข้อมูลของคุณเอง.

เครื่องมือ Console ของ F12 Dev Tools นั้นดีมาก คุณสมบัติเติมข้อความอัตโนมัติ ที่ช่วยให้คุณมีคำสั่งอย่างไรก็ตามมันดูเหมือนจะเป็น มีความรู้น้อย เมื่อเปรียบเทียบกับ Firefox และ Chrome Dev Tools.

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

คอนโซลของ Firefox ดูเหมือนจะเป็นเครื่องมือที่มีความเป็นมืออาชีพมากที่สุดในบรรดาเครื่องมือพัฒนาสามตัว แยกต่างหากแสดงปัญหาประเภทอื่น: เครือข่าย, CSS, ข้อผิดพลาดด้านความปลอดภัยและข้อความบันทึก, และอนุญาตให้คุณโต้ตอบกับสิ่งเหล่านี้ผ่านทาง อินเตอร์เฟสคอนโซล, ไม่ใช่แค่มีข้อผิดพลาดของ JavaScript.

ทำความเข้าใจว่ารหัสของคุณกำลังทำอะไรอยู่

ดีบักเกอร์ เครื่องมือ (ทางลัด: CTRL + 3) ช่วยให้คุณเข้าใจว่าเกิดอะไรขึ้นกับโค้ดของคุณขณะที่ค้นหาข้อบกพร่องที่อาจเกิดขึ้น คุณสามารถตั้งค่านาฬิกาและจุดพักและดูสแต็คการโทร.

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

Edge Dev F12 Dev Tools ให้คุณ หยุดรหัสของคุณชั่วคราว ในช่วงกลางของการดำเนินการและขั้นตอนผ่านมันทีละบรรทัด คุณยังมีตัวเลือกให้ ปรับปรุงความสามารถในการอ่านของไฟล์ JavaScript ที่คอมไพล์หรือย่อขนาด, และคุณสามารถ แก้ไขข้อผิดพลาดทรัพยากรที่แตกต่าง (JavaScript, ส่วนขยาย, ฯลฯ ) ทีละรายการ.

Firefox และ Chrome DevTools นำเสนอฟังก์ชั่นเหล่านี้ทั้งหมดดังนั้น Edge จึงไม่ได้มอบประสบการณ์การดีบักที่ยอดเยี่ยม แต่ให้เครื่องมือที่มั่นคงและเชื่อถือได้แก่ผู้ใช้ซึ่งตรงข้ามกับคู่แข่ง.

ลองดูที่การสื่อสารของเบราว์เซอร์ - เซิร์ฟเวอร์

เครือข่าย เครื่องมือ (ทางลัด: CTRL + 4) ได้รับการออกแบบใหม่อย่างสมบูรณ์สำหรับ Microsoft Edge ตั้งแต่ Internet Explorer 11 ด้วยความช่วยเหลือของเครื่องมือที่มีประโยชน์นี้คุณสามารถ ติดตามการสื่อสารระหว่างเซิร์ฟเวอร์และเบราว์เซอร์, และตรวจสอบคำขอของแต่ละบุคคล.

คุณสามารถ กรองผลลัพธ์ตามประเภทเนื้อหา เช่นสไตล์ชีต, ภาพ, สื่อ, แบบอักษร, XHR และอื่น ๆ อีกมากมาย นอกจากนี้คุณยังสามารถ ดีบัก AJAX ด้วยความช่วยเหลือของเครื่องมือเครือข่าย.

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

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

ติดตามหน้าช้า

ประสิทธิภาพ แท็บ (ทางลัด: CTRL + 5) ช่วยให้คุณเข้าใจถึงสาเหตุที่ทำให้หน้าเว็บช้า ด้วยเครื่องมือประสิทธิภาพการทำงานของ Microsoft ก้าวไปข้างหน้าอย่างมากโดยการรวมก่อนหน้านี้ การตอบสนองของ UI และ Profiler เครื่องมือในการสร้างมุมมองแบบ end-to-end ของสคริปต์ทั้งหมดของคุณและแสดงผลการปฏิบัติงาน.

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

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

วินิจฉัยปัญหาหน่วยความจำ

หน่วยความจำ เครื่องมือ (ทางลัด: CTRL + 6) ทำให้เป็นไปได้ ค้นหาหน่วยความจำรั่ว ที่สามารถทำให้หน้าเว็บของคุณช้าลงและยังสามารถ ส่งผลกระทบต่อความมั่นคง ของเว็บไซต์ของคุณ.

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

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

ทดสอบเว็บไซต์ของคุณในขนาดหน้าจอที่แตกต่างกัน

การแข่งขัน เครื่องมือ (ทางลัด: CTRL + 7) ช่วยให้คุณสามารถทดสอบเว็บไซต์ของคุณภายใต้สถานการณ์ที่แตกต่างกัน คุณสามารถเลือกได้จากโปรไฟล์เบราว์เซอร์สองตัวเดสก์ท็อปและ Windows 10 Mobile และจากตัวแทนผู้ใช้ที่แตกต่างกันมากมายรวมถึงเดสก์ท็อปและมือถือทุกรุ่นของ Internet Explorer กลับสู่ IE6.

เป็นเรื่องที่น่าสนใจที่คุณมีตัวเลือกในการทำ ดูหน้าของคุณเป็น Bing Bot. นอกจากนี้คุณยังสามารถ เลียนแบบ GPS, และตั้งค่า ความละเอียดและทิศทางที่แตกต่างกัน.

เครื่องมือสำหรับนักพัฒนา Firefox ไม่มีเครื่องมือจำลองอุปกรณ์ แต่ Chrome DevTools มีตัวจำลองที่ซับซ้อนซึ่ง Edge สามารถแข่งขันกับมันได้ยาก.

ตัวอย่างเช่นหน้าจอจำลองของ Chrome มี กริดที่แม่นยำซึ่งแทรกมุมมองที่จำลอง, และคุณไม่เพียงสามารถเลือกจากโปรไฟล์เบราว์เซอร์และตัวแทนผู้ใช้ แต่ยังสามารถเลือกจากอุปกรณ์ต่าง ๆ เช่น รุ่นต่าง ๆ ของ iPhone หรือ Samsung Galaxy และอื่น ๆ อีกมากมาย โปรแกรมจำลองการทำงานของ Chrome DevTools มีประโยชน์เช่นกัน ตัวเลือกการซูม และคุณสามารถทดสอบเว็บไซต์ของคุณบนเครือข่ายที่แตกต่างกันเช่น 3G, 4G, DSL, WiFi เป็นต้น.

สรุป

โดยรวมแล้วเครื่องมือ F12 Dev ของ Microsoft Edge นั้นดูดีมาก มันมีคุณสมบัติที่ค่อนข้างคล้ายกับชุดพัฒนาเว็บไซต์ยอดนิยมของเบราว์เซอร์สมัยใหม่อื่น ๆ มีสองพื้นที่ที่เครื่องมือ F12 Dev ของ Edge นั้นแข็งแกร่ง: หน้าจอผู้ใช้ นั่นคือจริงๆ ใช้งานง่ายใช้งานง่ายและออกแบบมาอย่างดี, และ เครื่องมือวินิจฉัยประสิทธิภาพ.

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