การย้ายตำแหน่ง Chrome Developer Tools

ในการเขียนโปรแกรมเพื่อพัฒนาเว็บแอพริเคชั่นนั้น บ่อยครั้งที่เราต้องมีการทดสอบผลลัพธ์ต่างๆผ่านเว็บ Browser โดยในตัว Browser จะมีเครื่องมือในการแสดง html, css, js , log  ต่างๆเพื่อช่วยให้นักพัฒนาตรวจสอบการแสดงผลลัพธ์ให้ถูกต้องหรือแก้ html , css , js ณ ขณะนั้นเพื่อได้ผลลัพธ์ที่ถูกต้องแล้วค่อยกับไปแก้โคดจริง. ตัวผมเองก็ใช้ Chrome Developer Tools ในการทดสอบบ่อยๆเช่นกัน ซึ่ง Chrome Developer Tools เป็น Extensions ของ Chrome หากเราต้องการเปิดใช้งานสามารถทำได้ดังนี้ครับ
วิธีที่ 1 : ให้ไปคลิกที่ปุ่ม   >> More Tools (หรือ Tools) >> Developer Tools
วิธีที่ 2 : คลิกขวาแล้วเลือก Inspect Element
วิธีที่ 3 : กด  Ctrl+Shift+I (หรือ Cmd+Opt+I ใน Mac) เพื่อเปิด

วิธีที่ 4 : กด Ctrl+Shift+J (or Cmd+Opt+J ใน Mac) เพื่อเปิดและโฟกัสไปที่ Console

วิธีที่ 5 : กด  Ctrl+Shift+C (หรือ Cmd+Shift+C ใน Mac) เพื่อเปิดและให้อยู่ในโหมด Inspect Element (สังเกตุปุ่มค้นหากลายเป็นสีฟ้า)

การย้ายตำแหน่ง Chrome Developer Tools

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

เวลาเรากดค้างไว้จะปรากฏ drop-down ให้เราเลือกครับ. หากเราต้องการให้ Developer Tools แยกออกมาจากตัว Browser ให้เราคลิกรูปตัวเลขที่ 1 ครับ

แต่ถ้าหากเราต้องการให้ Developer Tools อยู่ด้านขวามือเราก็คลิกเลือก ข้อ 2 ครับ

About Nop

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.