คำถามติดแท็ก google-chrome-devtools

บ่อยครั้งที่ฉันต้องการตรวจสอบองค์ประกอบ (เช่นคำแนะนำเครื่องมือ) ที่ปรากฏขึ้นเมื่อมีการป้อน / ป้อนองค์ประกอบอื่นด้วยเมาส์เท่านั้น องค์ประกอบที่ปรากฏจะปรากฏให้เห็นผ่านเหตุการณ์ mouseenter ของ jQuery ฉันไม่สามารถตรวจสอบคำแนะนำเครื่องมือได้เนื่องจากคำแนะนำเครื่องมือจะหายไปเมื่อเมาส์ของฉันออกจากองค์ประกอบที่มีอยู่ มีวิธีหยุดเหตุการณ์ JS ชั่วคราวเพื่อให้ฉันสามารถวางเมาส์บนองค์ประกอบจากนั้นหยุด JS ของเบราว์เซอร์ชั่วคราวและตรวจสอบได้สำเร็จหรือไม่ ยกตัวอย่างให้ลองตรวจสอบคำแนะนำทวิตเตอร์บูตของ: http://getbootstrap.com/javascript/#tooltips

119 javascript  google-chrome-devtools 

โดยปกติจะแสดงการโทรทั้งสองสายการบินล่วงหน้าและคำขอจริง นี่เป็นบางครั้งที่น่ารำคาญ มีวิธีซ่อนคำขอก่อนเที่ยวบินหรือไม่? หรือมีปลั๊กอินสำหรับกรองคำขอบางอย่างตามส่วนหัวหรือไม่?

117 cors  google-chrome-devtools 

เอกสารhttp://code.google.com/chrome/devtools/docs/elements.htmlระบุว่ารองรับ XPath หรือ CSS selectors แต่เมื่อฉันลองแล้วดูเหมือนจะไม่ได้ผลสำหรับฉัน มีใครรู้วิธีใช้ไหม

116 dom  google-chrome  google-chrome-devtools 

ฉันต้องการดูคำขอเครือข่ายของฉันใน React Native เพื่อช่วยฉันในการดีบัก - ควรอยู่ในแท็บ 'เครือข่าย' ของเครื่องมือพัฒนาของ Chrome มีปัญหาปิดเกี่ยวกับเรื่องนี้ใน GitHub ( https://github.com/facebook/react-native/issues/4122และhttps://github.com/facebook/react-native/issues/934 ) แต่ฉันไม่ t เข้าใจพวกเขาทั้งหมด ดูเหมือนว่าฉันจำเป็นต้องเลิกทำ polyfills ของ React Native จากนั้นเรียกใช้คำสั่งบางอย่างด้วยแฟล็กการดีบักพิเศษและอาจแก้ไขการตั้งค่าความปลอดภัยของ Chrome และเห็นได้ชัดว่ามีปัญหาด้านความปลอดภัยบางอย่างที่เกี่ยวข้องกับการทำสิ่งนี้ซึ่งอาจทำให้เป็นความคิดที่แย่มาก แต่ไม่มีใครเกี่ยวข้องกับเธรดได้ระบุอย่างชัดเจนว่าพวกเขาคืออะไร ใครช่วยให้คำแนะนำทีละขั้นตอนในการทำให้แท็บเครือข่ายทำงานร่วมกับ React Native ตลอดจนคำอธิบายเกี่ยวกับปัญหาด้านความปลอดภัยที่เกี่ยวข้องในการดำเนินการดังกล่าว

116 javascript  google-chrome-devtools  react-native 

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

112 google-chrome-devtools 

ฉันพยายามดูผ่านเครื่องมือสำหรับนักพัฒนาของ Chrome ว่าคำแนะนำเครื่องมือมีโครงสร้างอย่างไรบนไซต์ อย่างไรก็ตามแม้ว่าฉันจะวางเมาส์เหนือรายการนั้น แต่เมื่อฉัน "ตรวจสอบองค์ประกอบ" ก็ไม่มีสิ่งใดแสดงสำหรับคำแนะนำเครื่องมือใน html ฉันรู้ว่าฉันสามารถตั้งค่ารูปแบบเป็น:hoverได้ แต่ฉันยังไม่เห็น html หรือ css ของคำแนะนำเครื่องมือ ความคิดใด ๆ ?

107 html  css  hover  google-chrome-devtools 

มีวิธีที่รวดเร็วในการเปลี่ยนจากโค้ด jsx ที่แสดงใน Chrome DevTools เป็น Raw ES5 และกลับมาอีกครั้งหรือไม่?

107 javascript  google-chrome  google-chrome-devtools  source-maps 

หมายเหตุ: ฉันอ่านหัวข้อที่คล้ายกัน แต่ไม่มีปัญหาของฉันเลย - ฉันสามารถคลิกขวาที่มันได้ดีจากนั้นก็หายไป ฉันพบว่า "Inspect Element" เป็นเครื่องมือล้ำค่าใน Chrome อย่างไรก็ตามการจู่โจมครั้งล่าสุดของฉันเมื่อฉันได้เรียนรู้วิธีการใช้เวทมนตร์ที่หลายคนมีอยู่แล้วเห็นว่าฉันสร้างเมนูย่อยสำหรับองค์ประกอบบนแถบนำทางซึ่งจะปรากฏขึ้นด้านล่างเมื่อวางเมาส์เหนือมัน รายการหลัก ป๊อปอัป (หรือลง) ไม่ค่อยมีสไตล์ที่ฉันต้องการดังนั้นฉันจึงคลิกขวา> ตรวจสอบองค์ประกอบเพื่อดูว่าอะไรมาจากไหนกันแน่และได้รับความคิดที่ดีขึ้นว่าจะบรรลุเอฟเฟกต์ที่ฉันต้องการได้อย่างไร อย่างไรก็ตามทันทีที่ฉันเลื่อนเมาส์ออกจากเมนูมันก็หายไป ดังนั้นฉันจึงไม่สามารถเลือกองค์ประกอบที่แตกต่างกันในบานหน้าต่างการตรวจสอบและดูว่าพื้นที่ใดถูกไฮไลต์พร้อมกัน มีวิธีแก้ปัญหานี้หรือไม่โดยไม่ต้องเปลี่ยนเมนูเพื่อให้ "โผล่ขึ้นมา" เมื่อเปิดใช้งาน

106 google-chrome  google-chrome-devtools 

มีเครื่องมือที่มีประโยชน์มากในเครื่องมือ Chrome dev ที่ฉันเพิ่งค้นพบ ฉันยังไม่รู้ชื่อของมันและฉันไม่พบใน google ฉันจะบอกว่ามันเป็นเครื่องมือตรวจสอบพิกเซล ฉันพบวิธีการใช้งานต่อไปนี้: 1a. ตรวจสอบองค์ประกอบ html ด้วยสีพื้นหลัง 1b. กำหนดสีพื้นหลังขององค์ประกอบ คลิกที่ตัวเลือกสี เลื่อนเมาส์ของคุณไปที่องค์ประกอบใด ๆ บนหน้า (ไม่ใช่บนเครื่องมือ dev) ดู: http://skalar.darkware.hu/skalkaz/Chrome-Colorpicker.gif คำถามของฉัน: ชื่อเครื่องมือนี้คืออะไร? วิธีใช้งานง่ายๆ? ส่วนใหญ่ฉันไม่สนใจสี แต่ฉันต้องการตรวจสอบพิกเซลของไอคอน มีปุ่มลัดของเครื่องมือนี้หรือไม่?

104 google-chrome-devtools 

ในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Google Chrome ฉันเห็น#shadow-rootขวาใต้<html lang="en">แท็ก ใช้ทำอะไรและใช้ทำอะไร? ฉันไม่เห็นมันใน Firefox หรือใน IE เฉพาะใน Chrome นี่เป็นคุณสมบัติพิเศษหรือไม่ ถ้าฉันเปิดมันจะแสดง<head>และ<body>และลิงค์ข้างชื่อrevealโดยการคลิกจะชี้ไปที่<head>และ<body>ไม่มีอะไรอื่น

103 html  google-chrome  dom  google-chrome-devtools 

การใช้ Chromes Web Inspector เพื่อดูโค้ดมีประโยชน์มาก แต่คุณจะดูตัวอย่างรหัสโฮเวอร์ของปุ่มได้อย่างไร? คุณจะต้องวางเมาส์เหนือปุ่มจึงไม่สามารถใช้ (เมาส์) ในตัวตรวจสอบได้ มีทางลัดหรือวิธีอื่น ๆ ในการดำเนินการนี้ในผู้ตรวจสอบหรือไม่?

99 css  google-chrome  google-chrome-devtools  web-inspector 

ฉันกำลังพัฒนาเว็บแอปพลิเคชันด้วยแนวทางส่วนหน้าที่หนักหน่วง ด้วยการใช้ Dojo และ AMD-way ขณะนี้ฉันมีหน้าจอทดสอบซึ่งอาจโหลดไฟล์ javascript ได้มากกว่าร้อยไฟล์ เมื่อฉันต้องการแก้ไขข้อบกพร่องสำหรับปัญหาใด ๆ หรือตรวจสอบว่าฉันเห็นไฟล์เวอร์ชันเก่าหรือไม่ฉันพบว่ามันยากมากที่จะหาไฟล์ของฉันในแท็บแหล่งที่มาในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome มีทางลัดหรือการดำเนินการใดที่ฉันสามารถทำได้ที่จะให้ฉันพิมพ์ชื่อไฟล์และจะพาฉันไปยังแหล่งที่มาของไฟล์นั้น

99 javascript  debugging  google-chrome  google-chrome-devtools  frontend 

มีวิธีบอกดีบักเกอร์ Chrome (หรืออาจจะเป็น Firebug?) ไม่ให้แตกภายในไฟล์บางไฟล์หรือไม่? จะถือว่าพวกเขาไม่ได้แตกหักโดยพื้นฐานแล้ว? ดูเหมือนว่าสิ่งที่พวกเขาอาจสร้างขึ้น

98 javascript  google-chrome-devtools 

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

97 google-chrome  mobile  google-chrome-devtools 

ปริมาณข้อมูลทั้งสองนี้ที่อยู่ด้านล่างของแท็บเครือข่ายแตกต่างกันอย่างไร

96 google-chrome  google-chrome-devtools