เหตุผลที่พบบ่อยที่สุดที่ผู้ใช้ต้องการเปิด browser console คือเพื่อระบุปัญหาการแก้ไขหน้า เว็บไซต์ส่วนประกอบที่เสียหาย บล็อกที่ทำงานผิดปกติ และข้อผิดพลาดและความขัดแย้งของ JavaScript ประเภทอื่นๆ อย่างไรก็ตาม แต่ละเบราว์เซอร์มีลัดปุ่มและขั้นตอนของตัวเองที่จะช่วยให้คุณเปิดคอนโซลและเห็นแบ็กเอนด์ของเว็บเพจที่คุณเยี่ยมชม
เนื่องจากมีเบราว์เซอร์ที่แตกต่างกันเพียง 4 ตัวที่มีมาร์เก็ตเชียร์มากกว่า 5% (Chrome, Safari, Edge และ Firefox) เราจะแสดงวิธีหลายวิธีในการเปิดคอนโซลบนแต่ละตัว แต่โปรดทราบว่ากับแต่ละเบราว์เซอร์ องค์ประกอบและข้อผิดพลาดโดยทั่วไปจะถูกเข้ารหัสสีและติดฉลากแตกต่างกัน
วิธีเปิด Console บน Google Chrome
บน Chrome มีจริงๆ 3 วิธีที่แตกต่างกันที่จะช่วยให้คุณเปิดคอนโซลในตัวได้
ไม่ว่าคุณจะใช้ Chrome build ใด คุณสามารถใช้ลัดปุ่มหนึ่งในนี้เพื่อเปิดและปิดคอนโซลในตัวได้:
- F12
- Ctrl + Shift + J (Cmd + Option + J บน Mac)
โปรดทราบว่าลัดปุ่มเดียวกันนี้สามารถใช้เพื่อซ่อนคอนโซลได้เช่นกัน โดยค่าเริ่มต้น คอนโซลของ Google Chrome ใช้พื้นที่ครึ่งหนึ่งของหน้าจอ แต่คุณสามารถปรับอัตราส่วนได้ง่ายผ่านสไลเดอร์กลาง และเบราว์เซอร์จะจำการแก้ไขครั้งต่อไปที่คุณเปิดคอนโซล
หากคุณต้องการโฟกัสที่องค์ประกอบเฉพาะ คุณสามารถไฮไลท์มันด้วยเมาส์แล้วคลิกขวา > Inspect นี่จะเปิดแท็บ Elements และ Styles ของคอนโซล ช่วยให้คุณโฟกัสที่องค์ประกอบที่กำลังพิจารณา
อย่างไรก็ตาม คุณยังสามารถเข้าถึงคอนโซลผ่านเมนู GUI ของ Google Chrome ได้ เพื่อทำเช่นนี้ ให้คลิกที่ปุ่มการกระทำที่มุมขวาบน และไปที่ More Tools > Developer Tools
หากคุณมองหาการทำงานอย่างมีประสิทธิภาพที่สุด นี่คือรายการลัดปุ่ม Chrome Console ที่คุณสามารถใช้ได้
วิธีเปิด Console บน Google Microsoft Edge
เช่นเดียวกับเบราว์เซอร์อื่นๆ Microsoft Edge ก็มีเครื่องมือ Console สำหรับนักพัฒนาที่ทำ interactive debugging หรือ ad hoc testing
เครื่องมือนี้บันทึกข้อมูลที่เกี่ยวข้องกับเว็บเพจที่กำลังเยี่ยมชม คุณจะพบข้อมูลที่เกี่ยวข้องกับ JavaScript, network requests และ security errors
วิธีง่ายในการเปิด Console Tool บน Microsoft Edge คือการใช้ลัดปุ่มที่กำหนดไว้ล่วงหน้า (F12 Key)
แตคุณยังสามารถทำได้ผ่านเมนู GUI โดยคลิกที่ ปุ่มการกระทำ (มุมซ้ายบน) > More tools > Developer Tools
และคล้ายกับฟังก์ชันบนเบราว์เซอร์อื่นๆ Microsoft Edge ยังอนุญาตให้คุณตรวจสอบองค์ประกอบเฉพาะโดยใช้คอนโซลในตัว เพื่อทำเช่นนี้ ให้เลือกและคลิกขวาที่องค์ประกอบแล้วเลือก Inspect Element
นี่คือรายการลัดปุ่มที่มีประโยชน์บางส่วนที่คุณสามารถใช้ภายในคอนโซลในตัวของ Microsoft Edge:
| เปิด Console ในโหมดโฟกัส | Ctrl + Shift + J |
| สลับไปที่ Console | Ctrl + 2 |
| แสดงหรือซ่อน Console จากแท็บ DevTools อื่น | Ctrl + ` (back tick) |
| Execute (คำสั่งบรรทัดเดียว) | Enter |
| ขึ้นบรรทัดใหม่โดยไม่ Execute (คำสั่งหลายบรรทัด) | Shift + Enter หรือ Ctrl + Enter |
| ล้าง Console ทั้งหมด | Ctrl + L |
| กรอง Logs (ตั้งโฟกัสที่กล่องค้นหา) | Ctrl + F |
| ยอมรับคำแนะนำอัตโนมัติ (เมื่ออยู่ในโฟกัส) | Enter หรือ Tab |
| คำแนะนำอัตโนมัติก่อนหน้า/ถัดไป | Up arrow key/Down arrow key |
วิธีเปิด Console บน Mozilla Firefox
คอนโซลในตัวของ Mozilla Firefox ทำงานแตกต่างจากตัวเทียบเท่าที่เราได้วิเคราะห์มาแล้ว ไปนิดหน่อย สิ่งที่หมายคือ มันจะเปิดในหน้าต่าง standalone แทนที่จะแบ่งหน้าจอเบราว์เซอร์ครึ่งหนึ่ง
สิ่งนี้ช่วยให้วิธีการที่มีประสิทธิภาพมากขึ้นสำหรับคนที่มีหน้าจอที่สอง แต่อาจรบกวนผู้ใช้ที่ต้องทำงานกับหน้าจอเล็ก (หากคุณอยู่ในสถานการณ์นี้ คุณสามารถใช้ลัดปุ่ม Alt + Tab เพื่อสลับไปมาระหว่าง Firefox และ Browser Console ที่เกี่ยวข้อง)
เพื่อเปิด browser console ในตัวของ Mozilla Firefox คุณมี 3 ตัวเลือก:
- คุณสามารถใช้ universal shortcut – Ctrl + Shift + J (หรือ Cmd + Shift + J บน Mac)
- คุณสามารถเปิดจากเมนูการกระทำ – โดยคลิกที่เมนูการกระทำ > Web Developer > Browser Console.
- หรือคุณสามารถบังคับให้ Browser Console เปิดโดยตรงโดยการเปิด Firefox จากบรรทัดคำสั่งและส่งอาร์กิวเมนต์ ‘-jsconsole’:
/Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole
หมายเหตุ: Firefox ยังรวม Web console ซึ่งคล้ายกับ Browser console มาก แต่ใช้กับแท็บเนื้อหาเดี่ยวแทนที่จะเป็นทั้งเบราว์เซอร์
วิธีเปิด Console บน Google Safari
ไม่เหมือนเบราว์เซอร์อื่นๆ ที่เราดูมาแล้ว Error Console บน Safari ถูกปิดใช้งานโดยค่าเริ่มต้น เนื่องจากนี้ คุณจะต้องทำขั้นตอนเพิ่มเติมหนึ่งขั้นตอนเพื่อเปิดใช้งานมันบนเบราว์เซอร์ของคุณ
เพื่อทำเช่นนี้ ให้เปิด Safari และคลิกที่แท็บ Preferences เมื่อคุณอยู่ในแท็บ Preferences แล้ว ให้คลิกที่แท็บ Advanced และติ๊กกล่องที่เกี่ยวข้องกับ Show Develop menu in the menu bar
ตอนนี้ที่คุณทำให้ Console มองเห็นได้แล้ว คุณสามารถเปิดมันได้โดยการเข้าถึงแท็บ Develop ที่ด้านบนและคลิกที่ Show Error Console
โปรดทราบว่า Safari มีวิธีการแสดง error console แบบไดนามิก หากหน้าต่างเล็กเมื่อคุณเปิดคอนโซล คุณจะเห็นมันในหน้าต่างที่แตกต่างกันสมบูรณ์
ในกรณีที่คุณต้องการเปิดคอนโซลในหน้าต่างเดียวกับหน้าของคุณ คุณจะต้องแน่ใจว่าหน้าต่างเบราว์เซอร์มีขนาดเต็มก่อนเปิด Error console
