Google Chromeไม่ได้ออกแบบมาเฉพาะสำหรับผู้ใช้อินเทอร์เน็ตทั่วไปเท่านั้น แต่ยังสำหรับนักพัฒนาเว็บซึ่งมักจะสร้างเว็บไซต์ ออกแบบบล็อก ฯลฯ ตัวเลือก ตรวจสอบองค์ประกอบ^{(Inspect Element )}หรือตรวจสอบ^{(Inspect )}ของGoogle Chromeช่วยให้ผู้ใช้ค้นหาข้อมูลบางอย่างเกี่ยวกับเว็บไซต์ที่ซ่อนอยู่ไม่ให้เห็น . ต่อไปนี้คือเคล็ดลับบางประการเกี่ยวกับการใช้Inspect Elementของ เบราว์ เซอร์Google ChromeสำหรับWindows PC

ตรวจสอบองค์ประกอบของ Google Chrome

1] Find hidden JavaScript/Media files

เว็บไซต์หลายแห่งแสดงป๊อปอัปหากผู้เยี่ยมชมอยู่ในหน้าเว็บนานกว่า 15 หรือ 20 วินาที หรือหลายครั้งที่รูปภาพ โฆษณา หรือไอคอน เปิดขึ้นหลังจากคลิกแบบสุ่มจากที่ใดที่หนึ่ง หากต้องการค้นหาไฟล์ที่ซ่อนอยู่ในหน้าเว็บ คุณสามารถใช้แท็บแหล่งที่มา^(Sources)ของInspect Element มันแสดงรายการมุมมองต้นไม้ทางด้านซ้ายมือที่สามารถสำรวจได้

2] Get HEX/RGB color code in Chrome

บางครั้งเราอาจชอบสีและอาจต้องการค้นหารหัสสี คุณสามารถค้นหา รหัสสี HEXหรือRGBที่ใช้บนหน้าเว็บหนึ่งๆ ได้ง่ายๆ โดยใช้ตัวเลือกดั้งเดิมในGoogle Chrome ^{(Google Chrome)}คลิกขวา^{(Right-click)}ที่สีแล้วคลิกตรวจ^(Inspect)สอบ โดยส่วนใหญ่ คุณจะได้โค้ดสีทางด้านขวามือกับCSS อื่น ๆ หากคุณไม่เห็น คุณอาจต้องใช้ซอฟต์แวร์ตัวเลือกสีฟรี

เคล็ดลับ^(TIP) : ลองดูเครื่องมือออนไลน์ Color Picker^{(Color Picker online tools)} เหล่านี้ ด้วย

3] รับเคล็ดลับการปรับปรุงประสิทธิภาพของหน้าเว็บ^{(3] Get web page performance improvement tips)}

ทุกคนชอบที่จะลงจอดบนเว็บไซต์ที่เปิดอย่างรวดเร็ว หากคุณกำลังออกแบบเว็บไซต์ของคุณ คุณควรจำไว้เสมอว่า มีเครื่องมือมากมายในการตรวจสอบและเพิ่มประสิทธิภาพความเร็วในการโหลดหน้าเว็บ อย่างไรก็ตามGoogle Chromeยังมาพร้อมกับเครื่องมือในตัวที่ช่วยให้ผู้ใช้สามารถรับคำแนะนำในการปรับปรุงความเร็วในการโหลดเว็บไซต์ ในการเข้าถึงเครื่องมือเหล่านี้ ไปที่ แท็บการ ตรวจสอบ^(Audits)และตรวจสอบให้แน่ใจว่าได้ เลือก Network Utilization , Web Page PerformanceและReload Page และ Audit on Load^{(Reload Page and Audit on Load)}แล้ว จากนั้นคลิกที่ปุ่มเรียกใช้ ^{(Run )}มันจะโหลดหน้าใหม่และแสดงข้อมูลบางอย่างที่สามารถใช้เพื่อทำให้หน้าเร็วขึ้น ตัวอย่างเช่น คุณสามารถรับทรัพยากรทั้งหมดที่ไม่มีการหมดอายุของแคชJavaScriptที่สามารถรวมเป็นไฟล์เดียว เป็นต้น

4] ตรวจสอบการตอบสนอง^{(4] Check responsiveness)}

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

5] แก้ไขเว็บไซต์สด^{(5] Edit live website)}

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

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

Tips on using the Inspect Element of Google Chrome browser

Google Chrome is designed not just for regular internet users but also for web developers, who often сreate a website, design blogs, etc. The Inspect Element or Inspect option of Google Chrome assists users to find some information about a website that is hidden from view. Here are some tips on using the Inspect Element of Google Chrome browser for Windows PC.

Inspect Element of Google Chrome

1] Find hidden JavaScript/Media files

Many websites show popups if the visitor stays on the web page for more than 15 or 20 seconds. Or, many times an image, ad or icon, opens after clicking somewhere randomly. To find these hidden files on a web page, you can make use of the Sources tab of Inspect Element. It shows a tree-view list on the left-hand side that can be explored.

2] Get HEX/RGB color code in Chrome

Sometimes we may like a color and may want to find out its color code. You can easily find the HEX or RGB color code used on a particular web page, using the native option in Google Chrome. Right-click on the color, and click on Inspect. Most of the time, you will get the color code on the right-hand side with other CSS. If you do not see it, well, you may have to use some free color picker software.

TIP: Take a look at these Color Picker online tools too.

3] Get web page performance improvement tips

Everyone loves to land on a website that opens fast. If you are designing your website, you should always keep that in mind. There are many tools to check and optimize page loading speed. However, Google Chrome also comes with an inbuilt tool that allows users to get tips to improve the website loading speed. To access these tools, go to Audits tab, and make sure Network Utilization, Web Page Performance, and Reload Page and Audit on Load are selected. Then click on Run button. It will reload the page, and show you some information that can be used to make the page faster. For instance, you can get all the resources those are not having any cache expiration, JavaScript that can be combined into one file, and so on.

4] Check responsiveness

Making a web page responsive is crucial, nowadays. There are loads of tools that can check whether your site is completely responsive or not. However, this tool of Google Chrome helps users to know whether the site is responsive or not as well as check how it would look on a particular mobile device. Open any website, get Inspect Element tab, click on the mobile button, set the resolution, or select the desired device to test the web page.

5] Edit live website

Let’s assume that you are creating a web page, but you are confused about the color scheme or navigation menu size or content or sidebar ratio. You can edit your live website using the Inspect Element option of Google Chrome. Although you cannot save the changes on a live website, you can get carry out all the editing so that you can use it further. To do so, open Inspect Element, select the HTML property from the left-hand side and make styling changes on the right-hand side. If you make any change in CSS, you can click on the file link, copy the entire code and paste that into the original file.

Inspect Element of Google Chrome is a real companion of every web developer. It doesn’t matter whether you are developing a one-page website or a dynamic website, you can certainly use these tips.

Related posts

• Google Chrome ไม่ตอบสนอง Relaunch แล้วหรือยัง

• วิธีการแก้ไขข้อผิดพลาดใน File Download Google Chrome browser

• วิธีการเปลี่ยน Default Print Settings ใน Google Chrome

• วิธีการ Destroy Profile บน Browser Close ใน Google Chrome

• Anna Assistant เป็น voice assistant ที่สมบูรณ์แบบสำหรับ Google Chrome

• วิธีเปิดใช้งานหรือ Disable Scrollable Tabstrip ใน Google Chrome

• Tab Manager ส่วนขยายเพื่อเพิ่มผลผลิตใน Google Chrome

• Video Speed Controller สำหรับ Mozilla Firefox and Google Chrome

• Fix Blurry File Open dialog กล่องใน Google Chrome and Microsoft Edge

• Google Chrome vs Firefox Quantum สำหรับ Windows 10

• นาฬิกาของคุณอยู่ข้างหน้าหรือนาฬิกาของคุณอยู่ในข้อผิดพลาดใน Google Chrome

• วิธีเปิดใช้งานหรือปิดใช้งาน Tab Search icon ใน Google Chrome

• วิธีการ Create and Delete Profiles ใน Google Chrome เว็บเบราว์เซอร์

• Google Chrome กำลังรอแคช - ฉันจะทำอย่างไร!

• Skype Extension สำหรับ Google Chrome ให้คุณเข้าถึง Skype สำหรับ Web และอีกมากมาย!

• Best YouTube ส่วนขยายสำหรับ Google Chrome เพื่อปรับปรุงประสบการณ์

• วิธีตรวจสอบ Internet Connection Speed ของคุณโดยใช้ Google Chrome

• วิธีการเปิดโดยอัตโนมัติใน Spell Checker ใน Google Chrome

• วิธีเปิดใช้งาน Material Design UI ใหม่สำหรับ Google Chrome browser

• วิธีเปิดใช้งานและใช้ Reading List ใน Google Chrome