ตรวจสอบองค์ประกอบบน Chrome: 10 เคล็ดลับในการใช้งานอย่างมืออาชีพ

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

จะเปิดเครื่องมือสำหรับนักพัฒนาใน Chrome ได้อย่างไร

หากต้องการเปิดเครื่องมือสำหรับนักพัฒนา Chrome ใน Google Chrome ให้คลิกที่ปรับแต่ง chrome (⋮)>เครื่องมือเพิ่มเติม -> เครื่องมือสำหรับนักพัฒนา.นอกจากนี้คุณยังสามารถคลิกขวา ในหน้าที่คุณต้องการแก้ไขและเลือกตรวจสอบ. ฉันชอบใช้แป้นพิมพ์สั้น ๆCtrl + Shift + I(Cmd + Option + I สำหรับ Mac)

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

ยังอ่าน:วิธีเปลี่ยนพื้นหลัง Google Chrome

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

1. แก้ไขเว็บเพจ

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

document.body.contentEditable = true

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

2. เปิดเผยรหัสผ่านที่บันทึกไว้

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

คลิกขวาที่ช่องรหัสผ่าน แล้วเลือก“ตรวจสอบองค์ประกอบ.” ซึ่งจะเปิดหน้าต่างตัวตรวจสอบเอกสารและสิ่งที่คุณต้องทำคือแทนที่คำว่า“รหัสผ่าน” กับ“ข้อความ" ในประเภทรหัสผ่านช่องป้อนข้อมูล และควรเปิดเผยรหัสผ่านที่ซ่อนอยู่ในเครื่องหมายดอกจัน

3. ถ่ายภาพหน้าจอของหน้าเว็บ

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

ในการจับภาพหน้าจอให้เปิดเครื่องมือสำหรับนักพัฒนา Chrome ไปที่แท็บคอนโซลแล้วกดctrl + shift + M(windows) หรือcmd + opt + ม(Mac) จากนั้นคลิกที่เมนู 3 จุดที่ด้านบนขวาของหน้าเว็บแล้วเลือกจับภาพหน้าจอหรือจับภาพหน้าจอขนาดเต็ม. เท่านี้ภาพหน้าจอของคุณจะถูกบันทึกไว้ในโฟลเดอร์ดาวน์โหลด

ยังอ่าน:7 ส่วนขยายภาพหน้าจอ Chrome ที่ดีที่สุดสำหรับทุกความต้องการ

มีวิธีอื่นในการจับภาพหน้าจอและคุณสามารถติดตั้งส่วนขยายภาพหน้าจอหรือใช้ทางลัดสกรีนช็อตของคอมพิวเตอร์ prtsc (windows) และ cmd + shift + 4 (MacOS) แต่วิธีนี้ก็ใช้ได้ผลเช่นกัน

4. ใช้ตัวเลือกสี

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

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

5. เปลี่ยนเว็บไซต์เป็นรูปแบบมือถือ

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

ตัวแทนผู้ใช้ช่วยให้เว็บไซต์ระบุเบราว์เซอร์ของคุณ และในบางกรณีการเปลี่ยน user-agent help ตัวอย่างเช่นหากคุณต้องการตรวจสอบว่าเว็บไซต์ของคุณตอบสนองหรือไม่ แต่สิ่งที่ฉันชอบที่สุดคือการเข้าถึงเว็บไซต์เวอร์ชันอื่น ตัวอย่างเช่นเว็บไซต์ govt บางแห่งในอินเดียเปิดเฉพาะใน Internet Explorer เท่านั้นหรือสำหรับตัวอย่างทั่วโลกลองใช้ Instagram ดังที่คุณทราบคุณไม่สามารถอัปโหลดรูปภาพไปยัง Instagram เขาบนคอมพิวเตอร์ได้ แต่คุณสามารถทำได้จากเว็บไซต์บนมือถือ แล้วทำไมไม่ปลอมตัวเบราว์เซอร์เดสก์ท็อปให้เป็นของมือถือล่ะ?

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

6. ค้นหาอะไรก็ได้

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

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

หรือลองอีกตัวอย่างหนึ่งฉันพบเว็บไซต์ที่ใช้วิดีโอเป็นพื้นหลังและฉันอยากรู้ว่ามันคือวิดีโอใดกันแน่ตอนนี้การบันทึกหน้าเว็บจะใช้ไม่ได้ ให้ใช้เครื่องมือการพัฒนา Chrome แทนและค้นหา“ วิดีโอ”เลื่อนดูผลลัพธ์และดูว่าคุณได้รับ URL หรือไม่ ในกรณีนี้ให้ใช้สามัญสำนึกหากเป็นไฟล์วิดีโอส่วนใหญ่จะมีนามสกุลmp4, ลองดูสิ เอาล่ะตอนนี้คุณได้ผลลัพธ์สองสามรายการพร้อม mp4 หนึ่งในนั้นควรเป็นไฟล์วิดีโอคลิกที่มันเพื่อเปิด URL คัดลอก URL นั้นและวางในเบราว์เซอร์และปิดคุณไป

7. ลบป๊อปอัป

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

อ่าน:วิธีดูเนื้อหาที่ถูกบล็อกบนเว็บไซต์

8. เปลี่ยนตำแหน่ง GPS ของเบราว์เซอร์ของคุณ

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

ตัวอย่างเช่นเมื่อวันก่อนฉันท่อง CBS ด้วย VPN และทุกอย่างก็ทำงานได้ดี แต่เมื่อฉันตัดสินใจดูช่องท้องถิ่นใน CBS และมันแสดงป๊อปอัปขอตำแหน่งเบราว์เซอร์ของฉัน จากนั้นคลิกที่อนุญาตมันแจ้งว่าเนื้อหาไม่พร้อมใช้งานในตำแหน่งของฉัน

หากต้องการแก้ไขให้เปิดDeveloper Consoleโดยคลิกขวาบนหน้าจอ ที่ด้านล่างของแผงกดปุ่มสามจุด ที่ด้านขวาบนจากนั้นคลิกปุ่ม“เซนเซอร์” ตัวเลือกจากมากกว่า. หน้าต่างใหม่จะเปิดขึ้นในครึ่งล่างของหน้าต่างเครื่องมือสำหรับนักพัฒนาภายใต้ตำแหน่งทางภูมิศาสตร์เลือก“สถานที่ที่กำหนดเอง"ตอนนี้ใส่ตำแหน่งของคุณตามละติจูดและลองจิจูดหากคุณไม่ทราบค่าเหล่านี้คุณสามารถใช้ Google Maps ได้ตลอดเวลา หรือเพียงแค่เลือกชื่อเมืองเช่นแคลิฟอร์เนีย. ตอนนี้โหลดหน้านี้ใหม่อนุญาตให้ใช้ข้อมูลตำแหน่งในหน้าต่างป๊อปอัป และตอนนี้ถ้าฉันรีเฟรชหน้าและคลิกอนุญาตตำแหน่งอย่างที่คุณเห็นฉันสามารถสตรีมสถานีท้องถิ่นได้แล้ว

9. ใช้ไม้บรรทัด

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

ในการเปิดไม้บรรทัดให้คลิกขวาบนหน้าที่คุณต้องการใช้ไม้บรรทัดแล้วคลิก“ตรวจสอบองค์ประกอบ”. ถัดไปคุณต้องเปิดใช้งานเป็นครั้งแรกคลิกที่จุดแนวตั้ง 3 จุดที่ด้านบนขวาและการตั้งค่าหน้าต่างใหม่จะเปิดขึ้นภายใต้องค์ประกอบ ส่วนเลือก แสดงไม้บรรทัด ตัวเลือก

10. จำกัด ความเร็วในการดาวน์โหลดบน Chrome

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

ในการตั้งค่าความเร็วของแท็บ ไปที่ตัวเลือกสำหรับนักพัฒนาและ คลิกที่ปุ่มตัวเลือก ถัดจากการตรวจสอบและเลือกการตั้งค่าหรือคุณสามารถกดปุ่ม F1 โดยตรงเพื่อ เปิดการตั้งค่า. ไปที่แท็บการควบคุมปริมาณ แล้วคลิก "เพิ่มโปรไฟล์ที่กำหนดเอง ". คุณสามารถตั้งชื่อโปรไฟล์และตั้งค่าความเร็วในการดาวน์โหลดและอัพโหลดได้ หลังจากเพิ่มตัวเลขแล้วคลิก "เพิ่ม" เท่านี้ก็เสร็จเรียบร้อย

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

คุณใช้เครื่องมือ Chrome Developer อย่างไร

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