คีย์ลัดในเบราว์เซอร์ Chrome, Firefox และ IE ที่นักพัฒนาเว็บไซต์ควรรู้
เชื่อว่านักพัฒนาเว็บไซต์หลายๆ คนคงจะมีประสบการณ์ในการทำเว็บไซต์ที่แตกต่างกัน และแน่นอนว่าในขั้นตอนการพัฒนาและการทดสอบการแสดงผลการใช้งานเว็บไซต์ของแต่ละคนก็มีวิธีการที่แตกต่างกัน สำหรับผู้เขียนก็มีวิธีส่วนตัวเล็กๆน้อยๆที่เรียนรู้และลองด้วยตนเองเช่นกัน จึงได้นำข้อมูลที่อาจจะเป็นประโยชน์มาบอกต่อกับนักพัฒนาเว็บไซต์มือใหม่ หรือคนอื่นๆทั่วไป ที่ยังไม่ทราบและไม่เคยใช้ประโยชน์จากเครื่องมือที่เบราว์เซอร์มีให้มาก่อน
1. ปุ่ม F12 (Chrome, Firefox, IE) เป็นปุ่มที่เอาไว้สำหรับเรียกแถบเครื่องมือนักพัฒนาขึ้นมา เพื่อดูและค้นหาองค์ประกอบของหน้าเว็บในส่วนของโค้ดคำสั่ง เช่น HTML, CSS, Script และรีซอร์สอื่นๆ พร้อมทั้งสามารถใช้แก้ไขควบคู่ไปกับการดูอินเตอร์เฟสได้ทันที และนำโค้ดที่ได้ไปใช้ในไฟล์จริง หากต้องการแก้ไขคำสั่งหรือแก้ไขการทำงานของ Script เช่น Javascript, JQuery และอื่นๆ ก็สามารถเข้าไปทดสอบพิมพ์คำสั่งเพื่อ Run ผ่านในส่วนของแถบ Console ได้ นอกจากนี้ยังมีส่วนต่างๆ ที่เป็นส่วนจัดการขั้นสูงโดยความชำนาญจะขึ้นอยู่กับผู้ใช้แต่ละคน
2. Ctrl+Shift+M (Firefox) ปุ่มคำสั่งคีย์ลัดที่มีให้ใช้อยู่เฉพาะในเบราว์เซอร์ Firefox เป็นปุ่มที่มีไว้สำหรับผู้พัฒนาเว็บไซต์แบบ Responsive ที่สามารถรองรับการแสดงผลของหน้าจอที่มีขนาดแตกต่างกัน เช่นในอุปกรณ์พกพาต่างๆ สำหรับในเบราว์เซอร์ Chrome นั้นถ้ากด Ctrl+Shift+M ในปัจจุบันจะถูกเปลี่ยนแปลงแล้ว โดยจะต้องกด F12 ไปแถบเครื่องมือก่อน แล้วจึงกดรูปมือถือในมุมบนซ้ายมือของแถบเครื่องมือจึงจะมองในมุมมองของอุปกรณ์พกพาต่างๆได้ (ซึ่งในส่วนนี้จะไม่มีคีย์ลัดให้กดแล้ว) ส่วนในเบราว์เซอร์ IE ก็มีเช่นกันด้วยการกดปุ่ม Ctrl+Shift+(ตัวเลข) ซึ่งจะแสดงผลขนาดหน้าจอได้ในขนาดต่างๆ แต่บางขนาดผู้พัฒนาจะต้องกำหนดค่าเพิ่มเข้าไปเอง ดังภาพตัวอย่างด้านล่าง
3. Ctrl+F5 (Chrome,Firefox,IE) หรือ Ctrl+Shift+R (Chrome,Firefox) ปุ่มรีเฟรชโหลดหน้าเว็บซ้ำ เพื่อแสดงหน้าเว็บใหม่ที่แท้จริง เพราะเบราว์เซอร์จะมีการจดจำไฟล์หรือเก็บข้อมูลสำรองที่เรียกว่า Cache เช่นไฟล์ .css และรูปภาพ .jpg, .jepg, .png เป็นต้น ยกเว้นหากเป็นการ Cache ที่เซอร์เวอร์การกดปุ่มเหล่านี้จะไม่มีผล จะต้องรอจนกว่าจะหมดเวลา Cache หรือมีการอัพเดทอีกครั้ง
4. Ctrl+F (Chrome,Firefox,IE) อีกหนึ่งปุ่มที่นักพัฒนาเว็บไซต์บางคนมองข้ามเรียกง่ายๆ ว่าลืมใช้นั่นเอง เอาไว้สำหรับค้นหาโค้ดและคำสั่งที่เราต้องการหาได้อย่างสะดวกและง่ายดาย ซึ่งมันสามารถใช้แยกได้ทั้งส่วนของอินเตอร์เฟส และโค้ดในแถบเครื่องมือ
5. Ctrl+U (Chrome,Firefox,IE) สุดท้ายปุ่มที่ผู้เขียนแทบจะไม่ได้ใช้เพราะถนัดใช้เมาส์คลิกขวาดูมากกว่า โดยคีย์ลัดนี้มีหน้าทีสำหรับใช้เปิดหน้าซอร์สโค้ดแบบเต็มหน้าจอ มันจะเปิดหน้าต่าง หรือแท็บใหม่ขึ้นมาโดยทั้งหน้าจะแสดงให้เห็นโค้ดทั้งหมดของหน้าเว็บนั้น