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

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

นี่คือทุกสิ่งที่คุณจำเป็นต้องรู้เกี่ยวกับ โหมดนักพัฒนาเบราว์เซอร์ Google Chromeมีเครื่องมือใดบ้าง และวิธีใช้งานอย่างมีประสิทธิภาพ

โหมดนักพัฒนาซอฟต์แวร์ Chrome คืออะไร^{(What Is Chrome Developer Mode?)}

เมื่อเรากล่าวถึง โหมดนักพัฒนาซอฟต์แวร์ Chromeเราไม่ได้พูดถึงโหมดนักพัฒนาซอฟต์แวร์แบบเดียวกับ^{(same developer mode)}ที่คุณจะเห็นในChromebook ^{(Chromebooks)}สิ่งที่เราหมายถึงคือเครื่องมือพัฒนาChrome ที่ครอบคลุม (เรียกว่า ^(Chrome)Google DevTools ) ที่สร้างขึ้นในเบราว์เซอร์เอง

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

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

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

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

วิธีเข้าถึงเมนู Google Chrome DevTools^{(How To Access Google Chrome DevTools Menu)}

มีสองสามวิธีที่คุณสามารถเข้าถึงเมนูGoogle Chrome DevToolsได้ ขึ้นอยู่กับเครื่องมือที่คุณต้องการใช้

วิธีที่ง่ายที่สุดในการทำเช่นนี้คือจากเมนูGoogle Chrome ในการดำเนินการนี้ ให้คลิกไอคอนเมนูสามจุด^{(three-dots menu icon)}ที่ด้านขวาบน จากเมนูที่ปรากฏขึ้น ให้คลิกMore Tools > Developer Toolsพัฒนา

ซึ่งจะเป็นการเปิด ชุดเครื่องมือ DevToolsในเมนูใหม่ทางด้านขวาของแท็บหรือหน้าต่างChrome ที่เปิดอยู่^(Chrome)

คุณสามารถทำได้โดยใช้แป้นพิมพ์ลัด จากพีซีที่ใช้ Windows^(Windows)หรือLinux^{(Linux PC)}ให้เปิด เบราว์เซอร์ Chromeแล้วกดปุ่มF12 คุณยังสามารถกดCtrl + Alt + JหรือCtrl + Alt + Iในแท็บหรือหน้าต่างChrome ที่เปิดอยู่^(Chrome)

บน macOS ให้กดF12หรือกดปุ่มOption + Command + JหรือOption + Command + Iเพื่อเปิดเมนูChrome DevToolsแทน ซึ่งจะเปิดคอนโซลChrome พร้อมตัวเลือกในการย้ายไปยัง เครื่องมือChrome อื่นๆ ที่ด้านบนของ เมนูDevTools

หากต้องการ คุณสามารถดูซอร์สโค้ดสำหรับเว็บไซต์ (การเปิดแท็บElements ของเมนู ^(Elements)DevToolsในกระบวนการ) บนหน้าเว็บที่เปิดอยู่โดยคลิกขวาที่ตัวเลือกInspect แล้วคลิก^{(Inspect )}

การใช้ Chrome DevTools^{(Using Chrome DevTools)}

ตามที่เราได้อธิบายไปช่วงสั้นๆ คุณสามารถใช้Chrome DevTools kit เพื่อดูซอร์สโค้ดสำหรับเว็บไซต์ภายใต้แท็บElements จะช่วยให้คุณวิเคราะห์โค้ดที่อยู่เบื้องหลังหน้าเว็บที่คุณโหลด และดูข้อความแสดงข้อผิดพลาด (ระบุปัญหาในการโหลดไซต์) ใน คอนโซล Chromeใต้แท็บคอนโซล^(Console)

คุณยังสามารถดูแหล่งที่มาต่างๆ สำหรับเนื้อหาจากเว็บไซต์ภายใต้แท็บแหล่งที่มา ^(Sources)ตัวอย่างเช่น หากไซต์ใช้เครือข่ายการจัดส่งเนื้อหา (CDN)^{(using a content delivery network (CDN))}สื่อจากไซต์จะแสดงเป็นแหล่งที่มาอื่นที่นี่

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

หากคุณต้องการทดสอบประสิทธิภาพของไซต์ คุณสามารถตรวจสอบและบันทึกการใช้เครือข่ายของคุณได้ภายใต้แท็บเครือข่าย ^(Network)ซึ่งจะแสดงความเร็ว ขนาด และประเภทของคำขอเครือข่ายที่ทำขึ้นระหว่างเบราว์เซอร์ของคุณและไซต์

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

คุณสามารถวิเคราะห์สิ่งนี้เพิ่มเติมภายใต้ แท็บ ประสิทธิภาพ^{(Performance )}ซึ่งคุณสามารถบันทึก การใช้งานเบราว์เซอร์ Chrome ของคุณ ในเชิงลึกยิ่งขึ้น รวมถึงการบันทึกภาพหน้าจอที่จุดต่างๆ การดำเนินการนี้จะบันทึกระยะเวลาที่ใช้ในการโหลดไซต์ของคุณสำหรับการวิเคราะห์เพิ่มเติม

Google Chrome มีชื่อเสียงในด้านหน่วยความจำพีซีของคุณ^{(being hard on your PC memory)}ดังนั้นคุณจึงสามารถทดสอบการ ใช้ หน่วยความจำJavaScript ของไซต์ของคุณได้ภายใต้ แท็บหน่วยความจำ ^(Memory)คุณสามารถใช้โปรไฟล์การทดสอบChrome^{(Different Chrome)} ต่างๆ ได้ที่นี่ โดยมีข้อมูลเพิ่มเติมเกี่ยวกับการทดสอบนี้ที่หน้าเอกสารประกอบ ของChrome DevTools^{(Chrome DevTools documentation page)}

สำหรับการวิเคราะห์เนื้อหาไซต์ของคุณในเชิงลึกยิ่งขึ้น ตลอดจนพื้นที่จัดเก็บของเบราว์เซอร์ที่อาจใช้อยู่ (เช่น เพื่อบันทึกข้อมูล) คุณสามารถค้นหาผ่านแท็บแอปพลิเคชัน ^{(Application)}คุณสามารถดูข้อมูลคุกกี้ของไซต์ได้ที่นี่ภายใต้ ส่วน คุกกี้^(Cookies)หรือล้างพื้นที่จัดเก็บข้อมูลที่ใช้โดยคลิกตัวเลือกล้างพื้นที่เก็บข้อมูล^{(Clear storage)}

หากคุณกังวลเกี่ยวกับความปลอดภัยของไซต์ คุณสามารถตรวจสอบประสิทธิภาพของไซต์ได้ในแท็บความปลอดภัย ^{(Security )}ข้อมูลนี้จะให้ภาพรวมโดยย่อของการวิเคราะห์ความปลอดภัยของ Chrome สำหรับหน้าเว็บ รวมทั้งหน้านั้นมีใบรับรองSSL ที่ถูกต้องและเชื่อถือได้หรือไม่^(SSL)

หากคุณต้องการสร้างรายงานเกี่ยวกับประสิทธิภาพของไซต์ของคุณ รวมถึงหากเป็นไปตามมาตรฐานผู้ใช้ทั่วไป และหากประสิทธิภาพของไซต์อาจส่งผลต่อการเพิ่มประสิทธิภาพกลไกค้นหา คุณสามารถคลิกแท็บLighthouse ข้อเสนอนี้มีการตั้งค่าที่คุณสามารถตรวจสอบหรือยกเลิกการเลือกรายงานของคุณ คลิกสร้างรายงาน^{(Generate report)}เพื่อสร้างรายงานเพื่อดู

สิ่งนี้แทบจะไม่ทำให้เกิดรอยขีดข่วนพื้นผิวของศักยภาพที่ โหมดนักพัฒนาซอฟต์แวร์ Chromeสามารถนำมาใช้กับนักพัฒนาได้ หากคุณต้องการเรียนรู้เพิ่มเติมเอกสารประกอบของ Chrome DevTools^{(Chrome DevTools documentation)}จะช่วยคุณเกี่ยวกับเครื่องมือและคุณลักษณะที่มีให้ รวมถึงวิธีสร้างการทดสอบผู้ใช้ของคุณเองด้วย 

เคล็ดลับ Google Chrome ขั้นสูง^{(Advanced Google Chrome Tricks)}

ผู้ใช้ Chrome ส่วนใหญ่จะไม่เคยรู้ว่า ชุดเครื่องมือ DevTools ของ Google Chrome^{(Google Chrome DevTools)}มีอยู่ในเบราว์เซอร์ของตน แต่สำหรับผู้ใช้ขั้นสูง ชุดเครื่องมือนี้ยังคงเป็นวิธีที่มีประโยชน์อย่างยิ่งในการทดสอบและวิเคราะห์เว็บไซต์ นอกจากนี้ยังมี ส่วนขยาย Chrome^{(Chrome extensions for web developers)}ของบุคคลที่สาม สำหรับนักพัฒนาเว็บ เพื่อช่วยทดสอบไซต์ของคุณเพิ่มเติม

หากคุณกำลังสร้างเว็บไซต์พื้นฐาน การ^{(building a basic website)}เปลี่ยนไป ใช้โหมดนักพัฒนาซอฟต์แวร์ Chromeจะช่วยให้คุณตรวจพบข้อผิดพลาดในเว็บไซต์ของคุณซึ่งไม่สามารถมองเห็นได้ในทันที คุณสามารถทำได้ก็ต่อเมื่อChromeทำงานอย่างถูกต้อง ดังนั้นหากคุณประสบปัญหาการขัดข้อง^{(struggling with Chrome crashes)}ของ Chrome คุณอาจต้องรีเซ็ตหรือติดตั้งเบราว์เซอร์ใหม่ก่อน

What Is Chrome Developer Mode & What Are Its Uses?

No website iѕ buіlt perfectly. Like all products made by humans, code errors are part of the process. That’s why it’s important to thoroughly test any new website you build to make sure that it’s aѕ free of errors as possible to give your usеrs the best possible experience. 

You shouldn’t test a web site without trying Google Chrome’s DevTools kit first. Chrome developer mode allows you to try out and thoroughly test a new site (or an existing one) to find and fix bugs. It can also give you insight into how other sites are run, including viewing the source code. 

Here’s everything you need to know about the Google Chrome browser developer mode, what tools it has, and how to use it effectively.

What Is Chrome Developer Mode?

When we refer to the Chrome developer mode, we’re not talking about the same developer mode that you’ll see on Chromebooks. What we’re referring to is the extensive Chrome development tools (called Google DevTools) that are built into the browser itself.

These are tools designed to test, analyze, and purposely break (if you need to) a web page you’ve loaded in the Google Chrome browser for testing purposes. At a basic level, you can use DevTools to view the source code for a website, letting you peek under the hood to see how a site has been built and how well it runs.

Google DevTools offers more than this, however. You can use Chrome developer mode to change a page after it’s loaded, run Google Chrome console commands to control and manipulate the page, as well as run speed and network tests to monitor web traffic.

You can also emulate other devices, including different operating systems and screen resolutions, in the Chrome DevTools mode. This lets you see if a site has responsive web design, and where site content and layouts will change depending on the device resolution or type.

While these tools are aimed at professional web developers or testers, it’s also handy for standard Chrome users to know their way around the DevTools suite. If you see a problem with a site that you can’t solve, switching to Chrome developer mode can help you see if the problem is with the site or with your browser.

How To Access Google Chrome DevTools Menu

There are a few ways you can access the Google Chrome DevTools menu, depending on the tool you wish to use.

The easiest method to do this is from the Google Chrome menu. To do this, click the three-dots menu icon in the top-right. From the menu that appears, click More Tools > Developer Tools.

This will open the DevTools kit in a new menu on the right-hand side of your open Chrome tab or window.

You can also do this by using keyboard shortcuts. From a Windows or Linux PC, open the Chrome browser and press the F12 key. You can also press the Ctrl + Alt + J or Ctrl + Alt + I keys in an open Chrome tab or window.

On macOS, press F12 or press the Option + Command + J or Option + Command + I keys to open the Chrome DevTools menu instead. This will open the Chrome console, with options to move to other Chrome tools at the top of the DevTools menu.

If you want, you can view the source code for a website (opening the Elements tab of the DevTools menu in the process) on any open web page by right-clicking the and clicking the Inspect option.

Using Chrome DevTools

As we’ve briefly touched upon, you can use the Chrome DevTools kit to see the source code for a website under the Elements tab. It’ll let you analyse the code behind the page you’ve loaded, as well as view error messages (indicating problems with how the site has loaded) in the Chrome console under the Console tab.

You can also view the different sources for content from a website under the Sources tab. For instance, if a site is using a content delivery network (CDN), media from a site would be listed as a different source here.

Chrome developer mode allows you to download that content directly, or perform more complex analysis of the content.

If you want to test how a site is performing, you can monitor and record your network usage under the Network tab. This will show the speed, size, and type of network requests made between your browser and the site.

For instance, when a page first loads, the site will load the page content itself, but it may also request data from third-party databases. For instance, when you sign in, this may query a database which would show up as a network request here.

You can analyse this further under the Performance tab, where you can record your Chrome browser usage in greater depth, including recording screenshots at different points. This will log how long it takes to load your site for further analysis.

Google Chrome has a reputation for being hard on your PC memory, so you can test your site’s JavaScript memory usage under the Memory tab. Different Chrome testing profiles can be used here, with further information about this testing at the Chrome DevTools documentation page.

For more in-depth analysis of your site content, as well as any browser storage it might be using (for instance, to log data), you can search through the Application tab. You can view site cookie information here under the Cookies section, or clear the storage being used by clicking the Clear storage option.

If you’re worried about your site security, you can check how well it performs under the Security tab. This will give you a quick overview of Chrome’s security analysis for a page, including whether or not the page has a correct and trusted SSL certificate.

If you want to generate a report on your site’s performance, including if it meets typical user standards and if the site performance could be affecting search engine optimization, you can click the Lighthouse tab. This offers settings you can check or uncheck for your report—click Generate report to create the report to view.

This barely scratches the surface of the potential that Chrome developer mode can bring to developers. If you want to learn more, the Chrome DevTools documentation should help you with the tools and features on offer, including how to build your own user tests with it. 

Advanced Google Chrome Tricks

Most Chrome users won’t ever know that the Google Chrome DevTools kit exists in their browser, but for power users, it remains an exceptionally useful way to test and analyse websites. There are also third-party Chrome extensions for web developers available to help test your site further.

If you’re building a basic website, switching to Chrome developer mode could help you spot errors with your site that aren’t immediately visible. You can only do this if Chrome is working correctly, so if you’re struggling with Chrome crashes, you may need to reset or reinstall your browser first.

Related posts

• ป้อนอัตโนมัติของ Google Chrome: คู่มือฉบับสมบูรณ์

• 10 ส่วนขยายความเป็นส่วนตัวที่ดีที่สุดสำหรับ Chrome (2022)

• ใช้ 4 ปลั๊กอิน Chrome เหล่านี้เพื่อเข้ารหัสข้อความ Gmail ของคุณ

• การตั้งค่าเนื้อหาของ Google Chrome: คู่มือฉบับเต็ม

• บริการการประชุมทางโทรศัพท์ที่ดีที่สุดคืออะไร – แอพที่ดีที่สุดเปรียบเทียบ

• 5 Windows ทางเลือกแทนคำสั่ง Linux sudo

• วิดเจ็ตสภาพอากาศที่ดีที่สุดสำหรับ Windows 10/11

• บทช่วยสอน Microsoft Planner: ทุกสิ่งที่คุณต้องรู้

• 7 วิธีในการเปิดไฟล์ MDB โดยไม่ต้องใช้ Microsoft Access

• 5 สุดยอดเว็บไซต์ดาวน์โหลด APK ที่ปลอดภัยที่สุดสำหรับแอพ Android

• วิธีใช้ Windows Package Manager เพื่อติดตั้งโปรแกรม Windows

• ย้าย ลบ หรือคัดลอกไฟล์โดยอัตโนมัติใน Windows

• 11 ซอฟต์แวร์สกรีนช็อตฟรีที่ดีที่สุดสำหรับ Windows

• การกู้คืนไฟล์ Windows ของ Microsoft ทำงานได้หรือไม่ เราทดสอบแล้ว

• แอพกรองแสงสีน้ำเงินที่ดีที่สุด 5 อันดับสำหรับ Windows, Mac และ Linux

• ตัวแยกวิเคราะห์อีเมล Zapier: 3 วิธีที่สร้างสรรค์ในการใช้งาน

• HDG อธิบาย: Markdown คืออะไรและอะไรคือพื้นฐานที่ฉันควรรู้

• HDG อธิบาย : SQL, T-SQL, MSSQL, PL/SQL และ MySQL คืออะไร?

• ส่วนขยายความปลอดภัยออนไลน์ของ Avast: คุ้มค่าหรือไม่

• วิธีตรวจสอบว่าอุณหภูมิ CPU ของคุณสูงเกินไปหรือไม่