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

เนื่องจากมีเพียงสี่เบราว์เซอร์ที่แตกต่างกันซึ่งมีส่วนแบ่งการตลาดมากกว่า 5% (Chrome, Safari, Edge และ Firefox) เราจะแสดงให้คุณเห็นหลายวิธีในการเปิดคอนโซลในแต่ละเบราว์เซอร์ แต่พึงระลึกไว้เสมอว่าในแต่ละเบราว์เซอร์ องค์ประกอบและข้อผิดพลาดโดยทั่วไปจะมีรหัสสีและติดป้ายกำกับต่างกัน
วิธีเปิดคอนโซลบน Google Chrome
ใน Chrome มีสามวิธีที่จะช่วยให้คุณเปิดคอนโซลในตัวได้
ไม่ว่าคุณจะใช้ Chrome รุ่นใด คุณสามารถใช้ทางลัดเหล่านี้เพื่อเปิดและปิดคอนโซลในตัว:
- F12
- Ctrl + Shift + J (Cmd + Option + J บน Mac)
โปรดทราบว่าสามารถใช้ทางลัดเดียวกันนี้เพื่อซ่อนคอนโซลได้ ตามค่าเริ่มต้น คอนโซลของ Google Chrome จะใช้พื้นที่เพียงครึ่งเดียวของหน้าจอ แต่คุณสามารถปรับอัตราส่วนได้อย่างง่ายดายผ่านแถบเลื่อนตรงกลาง และเบราว์เซอร์จะจดจำการปรับเปลี่ยนในครั้งต่อไปที่คุณเปิดคอนโซล
หากคุณต้องการเน้นที่องค์ประกอบใดองค์ประกอบหนึ่ง คุณสามารถเน้นมันด้วยเมาส์แล้วคลิกขวาที่องค์ประกอบนั้น> ตรวจสอบ นี่จะเป็นการเปิด องค์ประกอบ แท็บและ สไตล์ แท็บของคอนโซล ให้คุณโฟกัสไปที่องค์ประกอบที่อยู่ตรงหน้าได้

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

หากคุณต้องการทำงานอย่างมีประสิทธิภาพมากที่สุด นี่คือรายการทางลัดของคอนโซล Chrome ที่คุณสามารถใช้ได้
วิธีเปิดคอนโซลบน Google Microsoft Edge
เช่นเดียวกับเบราว์เซอร์อื่นๆ Microsoft Edge ยังมีเครื่องมือ Console ที่มีไว้สำหรับนักพัฒนาที่ทำการแก้ไขจุดบกพร่องเชิงโต้ตอบหรือการทดสอบเฉพาะกิจ
เครื่องมือนี้จะบันทึกข้อมูลที่เกี่ยวข้องกับหน้าเว็บที่กำลังเข้าชม คุณจะพบข้อมูลที่เกี่ยวข้องกับ Javascript คำขอเครือข่าย และข้อผิดพลาดด้านความปลอดภัย
วิธีง่ายๆ ในการเปิด Console Tool บน Microsoft Edge คือการใช้ทางลัดที่กำหนดไว้ล่วงหน้า (คีย์ F12 )
แต่คุณสามารถทำได้ผ่านเมนู GUI โดยคลิกที่ ปุ่มการทำงาน (มุมบนซ้าย)> เครื่องมือเพิ่มเติม> เครื่องมือสำหรับนักพัฒนา .

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

ต่อไปนี้คือรายการพร้อมทางลัดที่มีประโยชน์ซึ่งคุณสามารถใช้ภายในคอนโซลในตัวของ Microsoft Edge:
การเปิดคอนโซลในโหมดโฟกัส | Ctrl + เปลี่ยน + จ |
เปลี่ยนไปใช้คอนโซล | Ctrl + 2 |
แสดงหรือซ่อนคอนโซลจากแท็บ DevTools อื่น | Ctrl + ` (ขีดกลับ) |
ดำเนินการ (คำสั่งบรรทัดเดียว) | ป้อน |
ขึ้นบรรทัดใหม่โดยไม่ต้องดำเนินการ (คำสั่งหลายบรรทัด) | เปลี่ยน + ป้อน หรือ Ctrl + ป้อน |
ล้างคอนโซลของข้อความทั้งหมด | Ctrl + ล |
บันทึกตัวกรอง (ตั้งค่าโฟกัสไปที่ช่องค้นหา) | Ctrl + ฉ |
ยอมรับคำแนะนำการเติมข้อความอัตโนมัติ (เมื่ออยู่ในโฟกัส) | ป้อน หรือ แท็บ |
คำแนะนำในการเติมข้อความอัตโนมัติก่อนหน้า/ถัดไป | แป้นลูกศรขึ้น /แป้นลูกศรลง |
วิธีการเปิดคอนโซลบน Mozilla Firefox
คอนโซลในตัวของ Mozilla Firefox ทำงานแตกต่างไปจากที่เทียบเท่าอื่น ๆ ที่เราได้วิเคราะห์ไปแล้วเล็กน้อย สิ่งที่ฉันหมายถึงคือ หน้าต่างจะเปิดขึ้นโดยอัตโนมัติในหน้าต่างแบบสแตนด์อโลน แทนที่จะแบ่งหน้าจอเบราว์เซอร์ของคุณออกเป็นสองส่วน
วิธีนี้ช่วยให้มีประสิทธิผลมากขึ้นสำหรับผู้ที่มีหน้าจอที่สอง แต่อาจขัดขวางผู้ใช้ที่ต้องใช้งานหน้าจอขนาดเล็กเพียงหน้าจอเดียว (หากคุณอยู่ในสถานการณ์นี้ คุณสามารถใช้ทางลัด Alt + Tab เพื่อวนไปมาระหว่าง Firefox และคอนโซลเบราว์เซอร์ที่เกี่ยวข้องได้
ในการเปิดคอนโซลเบราว์เซอร์ในตัวบน Mozilla Firefox คุณมีสามตัวเลือก:
- คุณสามารถใช้ทางลัดสากล – Ctrl + Shift + J (หรือ Cmd + Shift + J บน Mac)
- คุณสามารถเปิดได้จากเมนูการทำงาน – โดยคลิกที่เมนูการทำงาน> นักพัฒนาเว็บ> คอนโซลเบราว์เซอร์ .

- หรือคุณจะบังคับให้เปิดคอนโซลเบราว์เซอร์ได้โดยตรงโดยเปิด Firefox จากบรรทัดคำสั่งแล้วส่งอาร์กิวเมนต์ '-jsconsole':
/Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole
ก่อน>
หมายเหตุ: Firefox ยังมีเว็บคอนโซลซึ่งคล้ายกับคอนโซลของเบราว์เซอร์มาก แต่มันถูกนำไปใช้กับแท็บเนื้อหาเดียวแทนที่จะเป็นในเบราว์เซอร์ทั้งหมด
วิธีเปิดคอนโซลบน Google Safari
ไม่เหมือนกับเบราว์เซอร์อื่นๆ ที่เราเคยดูมา คอนโซลข้อผิดพลาดบน Safari ถูกปิดใช้งานโดยค่าเริ่มต้น ด้วยเหตุนี้ คุณจะต้องทำขั้นตอนเพิ่มเติมเพื่อเปิดใช้งานบนเบราว์เซอร์ของคุณ
ในการดำเนินการนี้ ให้เปิด Safari และคลิกที่ Preferences แท็บ เมื่อคุณอยู่ในค่ากำหนด คลิกที่แท็บขั้นสูงและทำเครื่องหมายในช่องที่เกี่ยวข้องกับ แสดงการพัฒนา เมนูในแถบเมนู

เมื่อคุณได้แสดงคอนโซลแล้ว คุณสามารถเปิดได้โดยเข้าไปที่พัฒนา ที่ด้านบนสุดแล้วคลิก แสดงคอนโซลข้อผิดพลาด .

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