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

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

เคล็ดลับของ Chrome เครื่องมือสำหรับการพัฒนา

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

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

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

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

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

3. ไปที่สาย

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

4. การเลือก DOM Elements ในแท็บ Console

เครื่องมือเดสก์ท็อปยังช่วยให้คุณสามารถเลือกองค์ประกอบในคอนโซลได้

• $ () - แสดงการเกิด CSS ครั้งแรกของตัวจับคู่ CSS ที่ตรงกัน
• $$ () - จะส่งกลับค่าอาร์เรย์ของอิลิเมนต์ที่ตรงกับตัวเลือก CSS ที่ระบุ

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

5. ใช้เวลาหลาย carets

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

6. Preserve Log

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

7. ใช้เครื่องมือสร้างส่วนเสริมในตัว

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

8. เว็บไซต์ของคุณเป็นมิตรกับมือถือหรือไม่? ตรวจสอบได้ที่นี่

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

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

9. จำลองเซนเซอร์และตำแหน่งทางภูมิศาสตร์

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

10 เลือกเหตุการณ์ถัดไปของคำปัจจุบัน

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

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

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

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

เราสามารถแก้ไขไฟล์ต้นฉบับและทำการเปลี่ยนแปลงบางอย่างใน CSS, Java Script และในไฟล์อื่น ๆ ในเครื่องมือ Chrome Dev เมื่อต้องการเพิ่มการเปลี่ยนแปลงเหล่านี้ลงในไฟล์ภายในเครื่องคุณไม่จำเป็นต้องคัดลอกวางการเปลี่ยนแปลงจากพื้นที่ทำงานลงในไฟล์บนดิสก์ เครื่องมือ Chrome Dev ช่วยให้คุณสามารถจับคู่ไฟล์และอัปเดตไฟล์ในเครื่องได้ด้วยการเปลี่ยนแปลงที่คุณทำในเครื่องมือของ dev คลิกขวาที่ไฟล์ต้นฉบับที่ด้านซ้ายบน แหล่งที่มา แท็บและเลือก เพิ่มโฟลเดอร์ในพื้นที่ทำงาน

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับพื้นที่ทำงานให้ไปที่ Chrome.com