แนะนำ workspace ใน developer tools ของ google chrome

สำหรับเหล่าสาวกของ google chrome คงจะรู้จัก developer tools (เรียกสั้นๆ ว่า dev tools ดีกว่าเนาะ) ที่ช่วยให้เราสามารถกดๆ จิ้มๆ หรืออะไรอีกๆ หลายๆ อย่าง คือประโยชน์เหลือล้นมาก แต่วันนี้ผมหยิบเอาฟีเจอร์ใหม่ที่จะเพิ่มความสะดวกสบายในการพัฒนาเว็บแอพพลิเคชั่นมาฝากกันครับ

ฟีเจอร์ที่พูดถึงก็คือ Workspace ที่จะช่วยประหยัดเวลาในการขั้นตอนปรับแก้ css และโครงสร้าง html ของหน้าเว็บ ทำไมถึงช่วยประหยัดเวลาน่ะเหรอครับ ย้อนไปก่อนหน้า เวลาเราแก้ไข css หรือ html ที่อยู่ใน dev tool เสร็จแล้วเราก็ต้องก๊อปปี้ ( copy ) สิ่งที่แก้ไขนั้นมาแปะ ( paste ) ที่ไฟล์ css กรณีแก้ไข  css หรือ แปะที่ไฟล์ html ในกรณีที่เพิ่มแท็ก (tag), คลาส (class) หรือ id

แต่ถ้าเราตั้งค่า Workspace และ map ไฟล์เข้ากับ URL แล้ว สิ่งที่เราแก้ไขต่างๆ นาๆ ทั้ง css และแท็ก html ต่างๆ ก็จะถูกบันทึกลงไฟล์ที่เรา map ไว้กับ Workspace โดยอัตโนมัติ เป็นไงครับแหล่มใช่มั๊ยล่ะ ^^ โม้เยอะแล้วมาดูวิธีตั่งค่ากันดีกว่าครับ

ก่อนอื่นหลังจากเข้ามาเว็บไซต์ของเรา (dev) ก็เปิด dev tools ขึ้นมาปกติ จากนั้นก็เข้าไปที่การตั้งค่าที่เป็นรูปเกียร์อยู่มุมซ้ายล่าง ก็มีให้เรากดเลือก workspace ซึ่งตอนที่ dev อยู่ผมก็จะอยู่ที่ localhost ครับ

workspace

จากนั้นก็กด Add folder เพื่อเลือกโฟลเดอร์ที่เก็บไฟล์ของเรา (html, js, css) พอเลือกเสร็จก็จะมีข้อความขึ้นมาให้เรายืนยันว่าให้ dev tools เขียนไฟล์ในโฟลเดอร์ที่เราเลือกไว้ได้ ก็ให้เรากด Allow ดังรูปครับ

allow-workspace

พอกด Allow เสร็จโฟลเดอร์ที่เราเลือกก็จะไปอยู่ในรายการโฟลเดอร์ของ workspace ครับ

workspace-folder-list

ซึ่งในโฟลเดอร์ของผมก็จะมีไฟล์อยู่ 2 ไฟล์ (น้อยๆ พอให้เห็นภาพครับ ^^) คือ index.html, style.css

workspace-file

จากนั้นก้คลิกที่แท็บ Source เพื่อจะ  map ไฟล์ ครับ ก็ให้คลิกที่ไฟล์ที่อยู่ภายใตัโดเมน (localhost) ครับ

map-file-workspace

จากนั้นก็จะมีป๊อปอัพขี้นมาให้เลือกไฟล์ที่ก็ให้เลือกไฟล์ให้ถูกต้องแล้วก็กด OK เพื่อรีเฟรส inspector

confirm-map-file-workspace

เท่านี้เราก็สามารถแก้ไขไฟล์ผ่าน dev tools ได้แล้วครับ ขอให้สนุกกับ Workspace และการพัฒนาเว็บนะครับ ^^

edit-file-workspace