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

เคล็ดลับเครื่องมือพัฒนา 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)

สำหรับคำสั่งคอนโซลเพิ่มเติมตรงไปที่โพสต์นี้^{(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.)}

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

Chrome Development Tools Tutorials, Tips, Tricks

Google Сhrome is one of the рopular web browsers for web develoрment, due to its advanced features. Chrome Developer Tools can be very useful while debugging. Most of us already know that we can edit the live CSS using Chrome Dev Tools, but there are more tips that we will share with you today.

Chrome Development Tools tips

There are many unknown and hidden tricks of Chrome Dev Tools and we will be looking in to the most useful tricks among them. To open the developer tools in Chrome, press F12 on your keyboard and try out the following tricks.

1. Find and Open any file

When we are doing web development we deal with many HTML, CSS, JS, and other files. When we want to debug anything, we open Chrome Dev tools. You can quickly search and find the particular file to make your job easier. Just, press Ctrl + P and start typing the file name. This helps you to find the particular file from the list of files.

2. Search within the source file

In the previous trick, we came to know how to search for a particular file. You can even search for a particular string in all the loaded files. Press Ctrl + Shift + F to search for a string in files. It also supports regular expressions.

3. Go to a particular line

Once you have opened any source file and want to move to a particular line, then press Ctrl + G and give the line number and hit enter.

4. Selecting DOM Elements in the Console tab

Dev Tools also allows you to select elements in the console.

• $() – Returns the first occurrence of the matching CSS selector.
• $$() – It returns the array of elements matching the given CSS selector.

For more console commands, head over to this post.

5. Make use of multiple carets

Sometimes, you want to set the multiple carets at different places and you can do that easily in Chrome Dev tools by holding the Ctrl key and clicking where you want to place them. Then start writing and you will see that is placed at various places selected.

6. Preserve Log

Preserve log helps you to persist the log even the page is loaded. Check the option beside Preserve log in the Console log and the log is preserved. This shows up the log before the page in unloaded and helpful to investigate the bugs.

7. Use built-in code beautifier

Chrome Dev Tools has the built-in code beautifier called pretty print “{}”. The developer tool shows the minimized code and is not so easy to read. Click on the pretty print button which is shown on the bottom left on the opened source file, to show the source file in the human-readable format.

8. Is your website mobile friendly? Check it here

Chrome Dev Tools also allows us to check whether a website is mobile-friendly or not. You can check how your website looks on various devices. Head over to Chrome Dev tools and under Emulation tab, you can file various devices. Select the device you want and test how your website looks on that device.

For more information, have a look at the following video.

9. Emulate Sensors and Geographical Location

You can even emulate the sensors like touch screens and accelerometers. You can even emulate the geographical location. To do this, head over to Emulation -> Sensors.

10. Select the next occurrence of the current word

If you want to replace the word In all of its occurrence, then select the word and press Ctrl + D to select the next occurrence of the selected word. Then, you can edit that word in all of its occurrences in one shot.

11. Alter Color Format

Just use Shift + Click on the color preview to change alters among rgba, hexadecimal and hsl formatting.

12. Add changes to local files through the workspace

We are able to edit source files and making some changes in CSS, JavaScript and other files in Chrome Dev tools. To add these changes to the local files, then there is no need to copy-paste the changes from workspace to files on disk. Chrome Dev tools allow you to match files and update the local file with the changes you have done in dev tools. To get this done right click on the source file on the left side on the Sources tab and select Add Folder to workspace.

Hope this helps.

Related posts

• สุดยอด Google Chrome Tips and Tricks สำหรับผู้ใช้ Windows PC

• 3 เคล็ดลับและเทคนิคที่เป็นประโยชน์สำหรับการใช้บันทึกย่อช่วยเตือน

• วิธีการดาวน์โหลด Font จาก A Website โดยใช้ Developer Tools

• Restart Chrome, Edge or Firefox โดยไม่ต้องสูญเสียแท็บใน Windows 11/10

• เคล็ดลับในการใช้ Inspect Element ของ Google Chrome browser

• 20+ Hidden Google Games คุณต้องเล่น (2021)

• วิธีใช้ Mobile browser emulator ใน Chrome, Firefox, Edge, และ Opera

• วิธีการเปลี่ยน Your Name บน Google Meet

• วิธีการแก้ไข 403 Forbidden Error บน Google Chrome

• ฉันจะทำให้ข้อความที่ใหญ่กว่าใน Chrome, Edge, Firefox และ Opera?

• วิธีแก้ไขรหัสข้อผิดพลาด Netflix M7111-1101

• ฉันจะใช้ Google Input Tools บนพีซี Windows 10 ของฉันได้อย่างไร

• Make InPrivate or Incognito shortcuts สำหรับ Firefox, Chrome, Edge, Opera หรือ Internet Explorer

• DNS ผ่าน HTTPS หรือการค้นหา DNS ที่ปลอดภัยคืออะไร เปิดใช้งานใน Google Chrome!

• Identify แบบอักษรใน Chrome, Edge and Firefox ใช้ Developer Tools

• คำถามง่ายๆ คุกกี้คืออะไรและทำหน้าที่อะไร?

• Combine ทั้งหมด Your Email Accounts เป็นหนึ่ง Gmail Inbox

• วิธีการยกเลิกการปิดกั้น Adobe Flash Player ใน Google Chrome

• ฉันจะทำอะไรรุ่นของ Chrome มี? 6 วิธีที่จะหา

• วิธีการ Fix Twitch Error 2000 ใน Google Chrome