สำหรับเหล่าสาวกของ google chrome คงจะรู้จัก developer tools (เรียกสั้นๆ ว่า dev tools ดีกว่าเนาะ) ที่ช่วยให้เราสามารถกดๆ จิ้มๆ หรืออะไรอีกๆ หลายๆ อย่าง คือประโยชน์เหลือล้นมาก แต่วันนี้ผมหยิบเอาฟีเจอร์ใหม่ที่จะเพิ่มความสะดวกสบายในการพัฒนาเว็บแอพพลิเคชั่นมาฝากกันครับ
ฟีเจอร์ที่พูดถึงก็คือ Workspace ที่จะช่วยประหยัดเวลาในการขั้นตอนปรับแก้ css และโครงสร้าง html ของหน้าเว็บ ทำไมถึงช่วยประหยัดเวลาน่ะเหรอครับ ย้อนไปก่อนหน้า เวลาเราแก้ไข css หรือ html ที่อยู่ใน dev tool เสร็จแล้วเราก็ต้องก๊อปปี้ ( copy ) สิ่งที่แก้ไขนั้นมาแปะ ( paste ) ที่ไฟล์ css กรณีแก้ไข css หรือ แปะที่ไฟล์ html ในกรณีที่เพิ่มแท็ก (tag), คลาส (class) หรือ id
[imooh_google_ads]
แต่ถ้าเราตั้งค่า Workspace และ map ไฟล์เข้ากับ URL แล้ว สิ่งที่เราแก้ไขต่างๆ นาๆ ทั้ง css และแท็ก html ต่างๆ ก็จะถูกบันทึกลงไฟล์ที่เรา map ไว้กับ Workspace โดยอัตโนมัติ เป็นไงครับแหล่มใช่มั๊ยล่ะ ^^ โม้เยอะแล้วมาดูวิธีตั่งค่ากันดีกว่าครับ
ก่อนอื่นหลังจากเข้ามาเว็บไซต์ของเรา (dev) ก็เปิด dev tools ขึ้นมาปกติ จากนั้นก็เข้าไปที่การตั้งค่าที่เป็นรูปเกียร์อยู่มุมซ้ายล่าง ก็มีให้เรากดเลือก workspace ซึ่งตอนที่ dev อยู่ผมก็จะอยู่ที่ localhost ครับ
จากนั้นก็กด Add folder เพื่อเลือกโฟลเดอร์ที่เก็บไฟล์ของเรา (html, js, css) พอเลือกเสร็จก็จะมีข้อความขึ้นมาให้เรายืนยันว่าให้ dev tools เขียนไฟล์ในโฟลเดอร์ที่เราเลือกไว้ได้ ก็ให้เรากด Allow ดังรูปครับ
พอกด Allow เสร็จโฟลเดอร์ที่เราเลือกก็จะไปอยู่ในรายการโฟลเดอร์ของ workspace ครับ
ซึ่งในโฟลเดอร์ของผมก็จะมีไฟล์อยู่ 2 ไฟล์ (น้อยๆ พอให้เห็นภาพครับ ^^) คือ index.html, style.css
จากนั้นก้คลิกที่แท็บ Source เพื่อจะ map ไฟล์ ครับ ก็ให้คลิกที่ไฟล์ที่อยู่ภายใตัโดเมน (localhost) ครับ
จากนั้นก็จะมีป๊อปอัพขี้นมาให้เลือกไฟล์ที่ก็ให้เลือกไฟล์ให้ถูกต้องแล้วก็กด OK เพื่อรีเฟรส inspector
เท่านี้เราก็สามารถแก้ไขไฟล์ผ่าน dev tools ได้แล้วครับ ขอให้สนุกกับ Workspace และการพัฒนาเว็บนะครับ ^^
