ฉันสามารถใช้ chrome-devtools เพื่อค้นหาแหล่งที่มาของ JS ทั้งหมดได้หรือไม่


171

ฉันมีปัญหาในการค้นหาไฟล์ JS ใน chrome dev-tools ในอดีตการค้นหาที่เปิดใช้งานโดยCtrl+ Shift+ Fจะพบสิ่งที่ฉันต้องการเสมอ แต่เมื่อเร็ว ๆ นี้ (ฉันไม่แน่ใจว่าการอัปเดตใดที่ทำให้เกิดสิ่งนี้) ค้นหาไม่พบ

  • JS ในแท็กสคริปต์แบบอินไลน์

  • JS ภายใน iframes

ฉันพบว่า callstack เกิดความสับสนเมื่อสคริปต์แบบอินไลน์มีส่วนเกี่ยวข้อง แต่เมื่อฉันพยายาม google สำหรับปัญหาเหล่านี้ฉันเพิ่งได้รับหน้าเอกสาร dev-tools แล้วมีคนอื่นสังเกตเห็นปัญหาเหล่านี้หรือไม่ ฉันเพิ่งจินตนาการว่างานนี้มาก่อนหรือไม่


4
โปรดระวัง - คำตอบที่ยอมรับใช้งานได้กับ CTRL + SHIFT + F และ "เปิดใช้งานการค้นหาในสคริปต์เนื้อหา" แต่ Chrome จะนับ 1 คู่ต่อบรรทัดเท่านั้นแม้ว่าจะมีคู่ที่ตรงกันหลายบรรทัดก็ตาม ด้วย JS แบบย่อคุณจะเห็นสิ่งนี้บ่อยครั้ง ฉันคิดว่านี่เป็นข้อผิดพลาดของ Chrome จนกว่าฉันจะรู้ว่าจะพบทุกกรณีหากคุณคลิกเข้าไปในสคริปต์ที่เป็นปัญหาและกด CTRL + F ที่นั่น
JD Smith

จุดที่ดี! ฉันพบพฤติกรรมบางอย่างที่ไม่สอดคล้องกับ chrome โดยเฉพาะอย่างยิ่งหลังจากอัปเกรดระหว่างการตั้งค่า "การค้นหาในสคริปต์เนื้อหา" และการพิมพ์สคริปต์ขนาดเล็กที่น่ารักบางครั้งสิ่งต่าง ๆ ไม่ทำงานอย่างสมบูรณ์ = (
David McMullin

1
จริงๆแล้วมีบางครั้งที่ Chrome ไม่สามารถหาอะไรได้ มันเกิดขึ้นกับฉันบ่อยครั้ง ตัวอย่างเช่นเมื่อฉันไปที่band-aidbrandfirstaid.com/first-aid-how-to-videosและค้นหาแหล่งที่มาสำหรับ _satellite.jwp.videos ฉันไม่เห็นผลลัพธ์ใด ๆ สตริงนั้นมีอยู่ - สกรีนช็อตฉันไม่สามารถหาคนอื่นที่มีปัญหานี้ได้ ตอนนี้ฉันใช้ Firefox และพบว่าใช้ได้
JD Smith

นั่นคือความอยากรู้แน่นอน! ฉันลองใช้การค้นหาเดียวกันในโครเมียมและใช้งานได้ดี (พบ 5 รายการที่ตรงกัน) คุณได้ลองเปิดใช้งานตัวเลือกที่กล่าวถึงในคำตอบของฉันด้านล่างหรือไม่?
David McMullin

2
เฟรมสามารถถูกแบนไปจนถึงด้านล่างของหน้าต่างคอนโซล (อย่างน้อยก็สำหรับฉัน) ลากขึ้นเพื่อให้คุณสามารถดูว่าดีกว่า
Emery Lapinski

คำตอบ:


170

ใช่ถ้าคุณต้องการค้นหาภายในแหล่งเนื้อหาซึ่งเป็นสคริปต์ที่ใช้โดยส่วนขยายและ API เบราว์เซอร์ภายในคุณเปิดใช้งานได้ในการตั้งค่าของ DevTools แล้วจากแผงใด ๆ ใน DevTools คุณสามารถพิมพ์Ctrl+ Shift+ Fหรือ (บน Mac) Options+ Command+ F( ⌥⌘F) เพื่อค้นหาแหล่งข้อมูลตัวอย่างและไฟล์ทั้งหมด

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


5
ตามความคิดเห็นอื่นอาจเป็นประโยชน์ในการอธิบายวิธีเปิดใช้งานการค้นหา (จากคำตอบอื่น) "เปิดใช้งานตัวเลือก 'ค้นหาในสคริปต์เนื้อหา' ในการตั้งค่าทั่วไปของ DevTools"
samneric

3
นี่ล้าสมัย
cdeutsch

8
ใน Chrome เวอร์ชันปัจจุบัน DevTools> การตั้งค่า> การกำหนดค่าตามความชอบ> แหล่งที่มา "ค้นหาในสคริปต์ที่ไม่ระบุชื่อและเนื้อหา"
Mark Hansen

ตกลงนี้ล้าสมัย นอกจากนี้ยังเป็นการดีที่จะชี้แจงว่าในการตั้งค่าเครื่องมือ Dev ควรเปิดใช้งาน
Max MacLeod

44

ดูเหมือนว่าคำตอบจะหาได้ง่ายกว่าเสมอหลังจากที่คุณใช้เวลาในการตั้งคำถามอย่างถูกต้อง ...

ฉันพบตัวเลือกภายใต้ทั่วไป -> แหล่งข้อมูลที่เรียกว่า "ค้นหาในสคริปต์เนื้อหา" ฉันไม่แน่ใจว่าจะปิดการใช้งานเมื่อไร แต่การเปิดใช้งานและการรีสตาร์ท Chrome ได้แก้ไขปัญหาทั้งหมดของฉันแล้ว


1
คงจะดีถ้า Chrome ขอให้เราเปิดใช้งานตัวเลือกนี้เมื่อทำ CTRL + SHIFT + F ฉันจำไม่ได้ว่าปิดใช้งาน แต่อย่างใดอย่างหนึ่งก็หยุดทำงาน ขอบคุณที่ช่วยฉันจากการใช้ Firefox เพื่อจุดประสงค์นี้!
JD Smith

ฉันค่อนข้างแน่ใจว่ามันกำลังค้นหาในทุกแหล่งก่อน แต่ทันใดนั้นมันก็หยุด! ตอนนี้ด้วยการตรวจสอบตัวเลือกนั้นมันทำงานอีกครั้ง! ขอบคุณ
Bakhshi

ฉันมีประสบการณ์แบบเดียวกันฉันชอบ Chrome เป็นส่วนใหญ่ แต่บางครั้งก็พบว่าพฤติกรรมที่ไม่คาดคิดหลังจากการอัปเดต = (ดีใจที่มันทำงานได้อีกครั้งในตอนนี้!
David McMullin

5
ใน Chrome 56 คุณจะพบตัวเลือกนี้ภายใต้ [เมนู DevTools ด้านบนขวาของหน้าต่าง DevTools] -> การตั้งค่า -> การตั้งค่า -> แหล่งที่มา -> "ค้นหาในสคริปต์เนื้อหา" (ช่องทำเครื่องหมายที่ด้านล่างสุด)
Chris

6
สำหรับฉันใน Chrome 69 ตอนนี้เรียกว่า "ค้นหาในสคริปต์ที่ไม่ระบุชื่อและเนื้อหา"
Jono

35

รุ่นล่าสุดของ DevTools

คลิกที่ไอคอนจุดสามจุดที่ด้านขวาของ DevTool dock และเลือกค้นหาค้นหา

หรือเพียงกด: Control- Shift- Fในขณะที่ใช้DevTools ( Control- Shift- I)

เมนู DevTools Dock


DevToolsเวอร์ชันเก่ากว่า

เปิดใช้งาน 'ตัวเลือกค้นหาในสคริปต์เนื้อหา ' ในการตั้งค่าทั่วไปของ DevTools มันจะช่วยให้สคริปต์เนื้อหาสามารถค้นหาได้

จากนั้นในพาเนลDevToolsคุณสามารถค้นหาไฟล์ต้นฉบับที่ด้านล่างของพาเนล

ตัวอย่างเช่น:

Google Chrome - สคริปต์เนื้อหา - ค้นหาแหล่งข้อมูล


หากคุณไม่มีแท็บค้นหาที่ด้านล่างของแผงDevToolsให้คลิกที่ไอคอนจุดสามจุดเพื่อเปิด

Chrome / Chromium - DevTools ค้นหาในไฟล์ซอร์สโค้ด


1
สำหรับฉันฉันต้องขยายแผงที่มีผลการค้นหา
Eng.Fouad

8

ฉันกำลังเผชิญกับปัญหาเดียวกัน CTRL + SHIFT + F ไม่ทำงานอีกต่อไป

  1. กด f12 เพื่อเปิดเครื่องมือสำหรับนักพัฒนา
  2. คลิกที่จุดไข่ปลาแนวตั้งที่ด้านขวาของแถบเครื่องมือนักพัฒนาซอฟต์แวร์เพื่อเปิดตัวเลือก
  3. คลิก "เครื่องมือเพิ่มเติม"
  4. คลิกที่ "ค้นหา"

ป้อนคำอธิบายรูปภาพที่นี่


5

ในกรณีที่ยังใช้งานไม่ได้ให้ตรวจสอบว่าติดตั้งส่วนขยายนี้ไว้ใน chrome หรือไม่:

form filler: https://chrome.google.com/webstore/detail/form-filler/bnjjngeaknajbdcgpfkgnonkmififhfo?hl=th

CTRL + SHIFT + F ยังคงไม่ทำงานสำหรับฉัน แต่ฉันค้นพบว่าส่วนขยายของ Chrome "Form Filler" กำลังแทนที่ "ค้นหาทั้งหมด" ในคำสั่งคอนโซล

หากต้องการเปลี่ยนแปลงสิ่งนี้: ไปที่ url -> chrome: // extensions /

จากนั้นไปที่ด้านล่างขวา: แป้นพิมพ์ลัดและคุณสามารถเปลี่ยนคำสั่ง + CTRL + SHIFT + F สำหรับป้อนข้อมูลในฟอร์ม

ดังนั้นคำสั่ง CTRL + SHIFT + F ในคอนโซลการค้นหาของ Chrome จะทำงานอีกครั้ง


4

ในเวอร์ชันล่าสุด CTRL + SHIFT + F ไม่ทำงานอีกต่อไปแม้หลังจากเปิดใช้งาน "ค้นหาในสคริปต์ที่ไม่ระบุชื่อและเนื้อหา"

ขั้นตอน 1) คุณต้องคลิกที่การแก้ไขทั้งสามที่ด้านบนขวาหรือด้านล่างซ้ายของเครื่องมือ dev ป้อนคำอธิบายรูปภาพที่นี่

2) คุณจะเห็นตัวเลือกการค้นหาซึ่งเป็นสิ่งที่คุณต้องการ

3) นอกจากนี้ยังมีแท็บค้นหาเป็นปัจจุบันที่ bottom.So มันอาจจะไม่สามารถมองเห็นได้ดังนั้นคุณอาจต้องลากแท็บขึ้น ป้อนคำอธิบายรูปภาพที่นี่

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.