บทแนะนำเครื่องมือพัฒนา Chrome เคล็ดลับและเทคนิค

Google Chromeเป็นหนึ่งในเว็บเบราว์เซอร์ยอดนิยมสำหรับการพัฒนาเว็บ เนื่องจากมีคุณลักษณะขั้นสูง เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome(Chrome Developer Tools)มีประโยชน์มากในขณะทำการดีบั๊ก พวกเราส่วนใหญ่รู้อยู่แล้วว่าเราสามารถแก้ไขCSS แบบสดได้ โดยใช้Chrome Dev Toolsแต่มีเคล็ดลับเพิ่มเติมที่เราจะแชร์กับคุณในวันนี้

คำแนะนำและเคล็ดลับเครื่องมือ Chrome Dev

เคล็ดลับเครื่องมือพัฒนา Chrome

มีเคล็ดลับที่ไม่รู้จักและซ่อนเร้นมากมายของเครื่องมือ Chrome Dev(Chrome Dev Tools)และเราจะพิจารณาลูกเล่นที่มีประโยชน์ที่สุดในหมู่พวกเขา หากต้องการเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ในChromeให้กดF12บนแป้นพิมพ์และลองใช้เทคนิคต่อไปนี้

1. ค้นหาและเปิดไฟล์ใด ๆ

เมื่อเราทำการพัฒนาเว็บ เราจะจัดการกับHTML , CSS , JS และไฟล์อื่นๆ จำนวนมาก เมื่อเราต้องการแก้ไขข้อบกพร่อง เราจะเปิดเครื่องมือChrome Dev คุณสามารถค้นหาและค้นหาไฟล์ที่ต้องการเพื่อให้งานของคุณง่ายขึ้น เพียง(Just)กดCtrl + P แล้วเริ่มพิมพ์ชื่อไฟล์ วิธีนี้ช่วยให้คุณค้นหาไฟล์เฉพาะจากรายการไฟล์

ค้นหาไฟล์

2. ค้นหาภายในไฟล์ต้นฉบับ

ในเคล็ดลับก่อนหน้านี้ เรามารู้จักวิธีค้นหาไฟล์เฉพาะ คุณยังสามารถค้นหาสตริงเฉพาะในไฟล์ที่โหลดทั้งหมดได้ กดCtrl + Shift + F เพื่อค้นหาสตริงในไฟล์ นอกจากนี้ยังรองรับนิพจน์ทั่วไป

ค้นหาภายในไฟล์

3. ไปที่บรรทัดใดบรรทัดหนึ่ง

เมื่อคุณเปิดไฟล์ต้นฉบับแล้วและต้องการย้ายไปยังบรรทัดใดบรรทัดหนึ่ง จากนั้นกดCtrl + G แล้วระบุหมายเลขบรรทัดแล้วกด Enter

ไปที่ไลน์

4. การเลือกองค์ประกอบ DOM ในแท็บคอนโซล(Console)

เครื่องมือ Dev(Dev Tools)ยังให้คุณเลือกองค์ประกอบในคอนโซลได้

  • $() – ส่งกลับ(Returns) การเกิดขึ้นครั้งแรกของ ตัวเลือกCSSที่ตรงกัน
  • $$() – ส่งกลับอาร์เรย์ขององค์ประกอบที่ตรงกับตัวเลือกCSS ที่กำหนด(CSS)

การเลือกองค์ประกอบ DOM

สำหรับคำสั่งคอนโซลเพิ่มเติมตรงไปที่โพสต์นี้(this post.)

5. ใช้ประโยชน์จากคาเร็ตหลายอัน

บางครั้ง คุณต้องการตั้งค่าคาเร็ตหลายอันในที่ต่างๆ และคุณสามารถทำได้ใน เครื่องมือ Chrome Devโดยกดแป้น Ctrl ค้าง(Ctrl )ไว้แล้วคลิกตำแหน่งที่คุณต้องการวาง แล้วเริ่มเขียนดูจะเห็นว่าถูกจัดวางตามสถานที่ต่างๆ ที่เลือกไว้

ใช้คาเร็ตหลายอัน

6. รักษาบันทึก

บันทึก(Preserve)บันทึกช่วยให้คุณคงบันทึกได้แม้จะโหลดหน้าแล้วก็ตาม เลือกตัวเลือกข้างPreserve logใน บันทึก Consoleและบันทึกจะถูกเก็บรักษาไว้ ข้อมูลนี้จะแสดงบันทึกก่อนที่หน้าจะยกเลิกการโหลดและมีประโยชน์ในการตรวจสอบจุดบกพร่อง

บันทึกบันทึก

7. ใช้บิวท์อินโค้ดที่สวยงาม

Chrome Dev Toolsมีตัวตกแต่งโค้ดในตัวที่เรียกว่าpretty print “{} ” เครื่องมือสำหรับนักพัฒนาจะแสดงโค้ดที่ย่อเล็กสุดและอ่านไม่ง่ายนัก คลิก(Click)ที่ปุ่มพิมพ์สวย ๆ ซึ่งแสดงอยู่ที่ด้านล่างซ้ายของไฟล์ต้นฉบับที่เปิดอยู่ เพื่อแสดงไฟล์ต้นฉบับในรูปแบบที่มนุษย์อ่านได้

ปุ่มพิมพ์สวย

8. เว็บไซต์ของคุณเหมาะกับอุปกรณ์เคลื่อนที่หรือไม่ ตรวจสอบที่นี่

เครื่องมือ Chrome Dev(Chrome Dev Tools)ยังช่วยให้เราตรวจสอบว่าเว็บไซต์เหมาะกับอุปกรณ์เคลื่อนที่หรือไม่ คุณสามารถตรวจสอบว่าเว็บไซต์ของคุณมีลักษณะอย่างไรบนอุปกรณ์ต่างๆ ตรงไปที่ เครื่องมือ Chrome Devและภายใต้ แท็บ Emulationคุณสามารถยื่นอุปกรณ์ต่างๆ ได้ เลือกอุปกรณ์ที่คุณต้องการและทดสอบว่าเว็บไซต์ของคุณมีลักษณะอย่างไรบนอุปกรณ์นั้น

เป็นมิตรกับมือถือ

สำหรับข้อมูลเพิ่มเติม โปรดดูวิดีโอต่อไปนี้

9. จำลองเซ็นเซอร์และที่ตั้งทางภูมิศาสตร์(Geographical Location)

คุณยังสามารถจำลองเซ็นเซอร์ต่างๆ เช่น หน้าจอสัมผัสและมาตรความเร่งได้อีกด้วย คุณสามารถจำลองตำแหน่งทางภูมิศาสตร์ได้ ในการดำเนินการนี้ ตรงไปที่Emulation -> Sensors.

จำลองเซ็นเซอร์

10. เลือกรายการถัดไปของคำปัจจุบัน

หากคุณต้องการแทนที่คำ ในทุกกรณี ให้เลือกคำนั้นแล้วกดCtrl + D เพื่อเลือกคำที่เลือกถัดไป จากนั้น คุณสามารถแก้ไขคำนั้นได้ในทุกคำในคราวเดียว

เลือกหลายรายการ

11. เปลี่ยนรูปแบบสี

เพียงใช้Shift + Click บนการแสดงตัวอย่างสีเพื่อเปลี่ยนการเปลี่ยนแปลงระหว่างการจัดรูปแบบ rgba เลขฐานสิบหก และ hsl

รูปแบบสี

12. เพิ่ม(Add)การเปลี่ยนแปลงไฟล์ในเครื่องผ่านพื้นที่ทำงาน

เราสามารถแก้ไขไฟล์ต้นฉบับและทำการเปลี่ยนแปลงบางอย่างในCSS , JavaScriptและไฟล์อื่นๆ ในเครื่องมือChrome Dev ในการเพิ่มการเปลี่ยนแปลงเหล่านี้ไปยังไฟล์ในเครื่อง คุณไม่จำเป็นต้องคัดลอกและวางการเปลี่ยนแปลงจากพื้นที่ทำงานเป็นไฟล์บนดิสก์ เครื่องมือ Chrome Dev(Chrome Dev)ช่วยให้คุณสามารถจับคู่ไฟล์และอัปเดตไฟล์ในเครื่องด้วยการเปลี่ยนแปลงที่คุณได้ทำในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ ในการดำเนินการนี้ให้คลิกขวาที่ไฟล์ต้นฉบับทางด้านซ้ายบน แท็บ แหล่งที่มา(Sources )และเลือกเพิ่มโฟลเดอร์ไปยังพื้นที่ทำงาน(Add Folder to workspace.)

หวังว่านี่จะช่วยได้



About the author

ฉันเป็นนักพัฒนาเว็บที่มีประสบการณ์มากกว่า 10 ปี ฉันเชี่ยวชาญด้านการพัฒนา Chrome OS และเคยทำงานในโครงการต่างๆ มากมายตั้งแต่สตาร์ทอัพขนาดเล็กไปจนถึงบริษัทที่ติดอันดับ Fortune 500 ฉันยังเป็นผู้เชี่ยวชาญในบัญชีผู้ใช้และความปลอดภัยของครอบครัว และได้พัฒนาแอพ Android ที่ประสบความสำเร็จหลายตัว



Related posts