ค้นหานิยามฟังก์ชัน JavaScript ใน Chrome

282

เครื่องมือนักพัฒนาซอฟต์แวร์ของ Chrome สั่นคลอน แต่สิ่งหนึ่งที่พวกเขาไม่มี (ที่ฉันหาได้) เป็นวิธีหนึ่งในการค้นหาคำจำกัดความของฟังก์ชัน JavaScript มันจะมีประโยชน์มากสำหรับฉันเพราะฉันกำลังทำงานในไซต์ที่มีไฟล์ JS ภายนอกมากมาย grep แน่นอนแก้ปัญหานี้ แต่ในเบราว์เซอร์จะดีขึ้นมาก ฉันหมายความว่าเบราว์เซอร์ต้องรู้สิ่งนี้ดังนั้นทำไมไม่เปิดเผย สิ่งที่ฉันคาดไว้คือ:

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

ก่อนอื่นฟังก์ชั่นนี้มีอยู่และฉันเพิ่งทำหายไปเหรอ?

และถ้ามันไม่ได้ผมคาดเดานี้จะมาจาก WebKit แต่ไม่พบอะไรสำหรับนักพัฒนาเครื่องมือคำขอคุณลักษณะหรือของ WebKit Bugzilla

javascript google-chrome-devtools

— Ryan DuVal
แหล่งที่มา

3

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

— hugomg

3

ด้วยเครื่องมือสำหรับนักพัฒนาของ Google Chrome ที่ "แหล่งที่มา" แตะ -> หน้าต่างด้านขวาคุณจะต้องตั้งค่า "จุดพักเหตุการณ์"

ในกรณีของฉันฉันมีชุดตัวแปรเป็นฟังก์ชั่นที่ไม่รู้จัก ฉันทำ myvar.toString () และพิมพ์: "function Object () {[native code]}" ซึ่งเป็นสิ่งที่ฉันต้องรู้

— แหวน

366

ให้บอกว่าเรากำลังมองหาฟังก์ชั่นชื่อfoo:

(เปิดเครื่องมือ dev Chrome)
ของ Windows: ctrl+ shift+ Fหรือ cmdMacOS: optn+ F+ หน้าต่างนี้เปิดขึ้นเพื่อค้นหาสคริปต์ทั้งหมด
เลือกช่องทำเครื่องหมาย "นิพจน์ปกติ"
ค้นหาfoo\s*=\s*function(ค้นหาfoo = functionด้วยช่องว่างระหว่างโทเค็นทั้งสาม)
กดที่ผลลัพธ์ที่ส่งคืน

อีกตัวแปรหนึ่งสำหรับการกำหนดฟังก์ชันใช้function\s*foo\s*\(สำหรับfunction foo(ช่องว่างจำนวนใด ๆ ระหว่างโทเค็นทั้งสาม

— plesiv
แหล่งที่มา

8

นี่คือสิ่งที่ฉันกำลังพูดถึง! ฉันไม่รู้ว่ามีบานหน้าต่างอยู่ - และคุณจะทำอย่างไร?

— Ryan DuVal

22

cmd + ตัวเลือก + F บน OSX

— Stiggler

2

fooนี้เป็นเพียงวิธีหนึ่งที่จะกำหนดฟังก์ชั่นที่มีชื่อว่า มีคนอื่น ๆ เกิดอะไรขึ้นถ้าฟังก์ชั่นของเราเป็นเช่นbar['foo']? (ไม่มีคำตอบที่ดีสำหรับคำถามนั้นเท่าที่ฉันรู้ --- มันเป็นหลัก "อย่าเขียนรหัสที่ซับซ้อน")

— สตีเวนลู

1

ฉันหาคำจำกัดความของฟังก์ชันไม่พบโดยใช้คำตอบที่เลือก ฉันค้นหาใน Google แล้วและไม่พบความช่วยเหลือใด ๆ (การใช้ Chrome เวอร์ชัน 41.0.2272.118 m)

— Web_Developer

7

แล้วคุณจะไม่พบการประกาศฟังก์ชันนิพจน์ฟังก์ชันที่สร้างขึ้นแบบไดนามิกและฟังก์ชันที่ไม่ระบุชื่อ (ไม่มีชื่อ) ฉันต้องการให้ Firefox: คลิกอ้างอิงฟังก์ชั่นในแผงนาฬิกา -> ข้ามไปที่การอ้างอิงฟังก์ชั่น

— Fagner Brack

77

สิ่งนี้ลงจอดใน Chrome ใน 2012-08-26 ไม่แน่ใจเกี่ยวกับรุ่นที่แน่นอนฉันสังเกตเห็นใน Chrome 24

ภาพหน้าจอมีค่าหนึ่งล้านคำ:

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

หวังว่าพวกคุณทุกคนจะพบว่ามีประโยชน์!

— Dmitry Pashkevich
แหล่งที่มา

1

มีทางลัดหรือฟังก์ชั่นที่จะอนุญาตให้ค้นหาโดยการอ้างอิงฟังก์ชั่นหรือไม่? เช่น "> ตรวจสอบ (document.body)" ตอนนี้ฉันต้อง d> tmp = {a: myFunc}; > tmp ตามด้วย "แสดงคำจำกัดความของฟังก์ชัน"

— Dennis C

16

ฉันคิดว่าคุณสามารถทำได้dir(myFunc)

— Dmitry Pashkevich

dir (myFunc) นั้นดีกว่ามาก แต่ก็ยังต้องใช้สองคลิกและเมาส์

— Dennis C

1

โอ้คุณหมายถึงถ้าคุณสามารถทำมันได้อย่างสมบูรณ์จากคีย์บอร์ด? สิ่งที่ชอบfindDefinition(myFunc)? AFAIK ที่ยังไม่มีอยู่ ...

— Dmitry Pashkevich

หากคุณไม่มีวัตถุที่มีฟังก์ชั่นคุณสามารถสร้างวัตถุที่อยู่รอบ ๆ และมันจะยังคงทำงาน เช่นในประเภทคอนโซล: ({1:somefunction})จากนั้นคลิกขวาที่ฟังก์ชันภายในวัตถุที่พิมพ์

— ป้องกันหนึ่ง

47

คุณสามารถพิมพ์ฟังก์ชั่นโดยการประเมินชื่อของมันในคอนโซลเช่นนั้น

> unknownFunc
function unknownFunc(unknown) {
    alert('unknown seems to be ' + unknown);
}

สิ่งนี้จะไม่ทำงานสำหรับฟังก์ชั่นในตัว แต่จะแสดง[native code]แทนรหัสต้นฉบับเท่านั้น

แก้ไข : นี่หมายถึงฟังก์ชั่นที่ได้รับการกำหนดภายในขอบเขตปัจจุบัน

— Joar
แหล่งที่มา

1

ที่ไม่ทำงานสำหรับฉัน (แม้ w / ฟังก์ชั่นที่กำหนดไว้ในหน้า):> toggle_search การอ้างอิงข้อผิดพลาด: toggle_search ไม่ได้ถูกกำหนด

— Ryan DuVal

อ่าดูการแก้ไขของฉัน นอกจากนี้การใช้ฟังก์ชั่นการค้นหาจะช่วยคุณได้ devtools Chrome ไม่ได้เป็น IDE ก็ดีบัก :)

— Joar

1

ใช้งานได้กับการค้นหาคำจำกัดความที่ใช้งานอยู่ในปัจจุบันของฟังก์ชัน

— Patrick

1

มันก็หมายความว่าฟังก์ชั่นที่ได้รับการกำหนดภายในขอบเขตปัจจุบัน

— Jonathan

1

@aroth อย่างน้อยใน Chrome 45 จะใช้งานได้อีกครั้ง ฉันรู้ว่าสิ่งต่าง ๆ เปลี่ยนไปในระหว่างสิ่งที่ถูกโพสต์และตอนนี้ สรุปแล้วดูเหมือนว่าจะทำงานได้อีกครั้ง

— joar

32

อัปเดต 2016 : ใน Chrome รุ่น 51.0.2704.103

มีGo to memberทางลัด (อยู่ในsettings > shortcut > Text Editor) เปิดไฟล์ที่มีฟังก์ชั่นของคุณ (ในsourcesพาเนลของ DevTools) และกด:

ctrl+ shift+O

หรือใน OS X:

⌘+ shift+O

สิ่งนี้ช่วยให้รายการและเข้าถึงสมาชิกของไฟล์ปัจจุบัน

— arthur.sw
แหล่งที่มา

1

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

— Scott Weaver

นี่คือสิ่งที่ฉันกำลังมองหาซึ่งเป็นคุณสมบัติที่คล้ายคลึงกับ Firefox! ใน firefox คุณสามารถเปิดเครื่องมือ dev กด Ctrl + f และมันจะค้นหาฟังก์ชัน JS ในบานหน้าต่างทั้งหมด (HTML / CSS / Javascript / etc) สิ่งนี้ทำไม่เหมือนกับคุณสมบัติของ regex ที่กล่าวถึงในคำตอบอื่น ๆ

— javaBean007

@ แรนดี้ Chrome รุ่นใด ระบบปฏิบัติการใด? ฉันใช้ Chrome เวอร์ชัน 59.0.3071.115 บน OS X และใช้งานได้ดี

— arthur.sw

@ arthur.sw ขออภัยฉันไม่ได้ตระหนักว่าคุณต้องอยู่ในแหล่งที่มาของสิ่งนี้ในการทำงาน ฉันคาดว่ามันจะทำงานในคอนโซลเช่นกัน

— แรนดี้

สำหรับฉันเมนูโครเมี่ยมจะเปิดขึ้นถ้าฉันกดปุ่มชุดนั้นในคอนโซล dev

— ดำ

19

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

— Răzvan Flavius Panda
แหล่งที่มา

17

เบราว์เซอร์ที่ต่างกันทำสิ่งนี้ต่างกัน

หน้าต่างที่เปิดคอนโซลเป็นครั้งแรกโดยการคลิกขวาบนหน้าและเลือก "ตรวจสอบธาตุ" F12หรือโดยการกดปุ่ม
ในคอนโซลพิมพ์ ...
- Firefox
```
functionName.toSource()
```
- โครเมียม
```
functionName
```

— Deepak Dixit
แหล่งที่มา

ฟังก์ชั่นที่ฉันค้นหาคือ stop () และใช้เป็น onmouseover = "this.stop ();" เมื่อฉันทำในสิ่งที่คุณพูดมันจะกลับมา: stop () {[native code]} แล้วจะทำอย่างไรดี?

— Tarik

functionName.toSource()ยังสามารถใช้ได้กับรุ่น Chrome ล่าสุด

— Sourav Ghosh

1

ดู @Tarik ที่เอกสารออนไลน์สำหรับ stopbuiltin

— คดีของกองทุนโมนิกา

@QPaysTaxes ขอบคุณตอนนี้ฉันเข้าใจแล้วว่าเมื่อมันคืน: stop () {[native code]} มีรหัสเนทีฟหมายถึงมันไม่ใช่ฟังก์ชั่นส่วนตัวมันเป็นฟังก์ชั่นภายในและฉันควรมองหาเอกสารออนไลน์ของฟังก์ชั่น

— Tarik

6

ในคอนโซล Chrome:

debug(MyFunction)
MyFunction()

— Igor Krupitsky
แหล่งที่มา

1

ฉันชอบมัน. สำคัญ: ทำ a undebug(MyFunction)เพื่อลบเบรกพอยต์อีกครั้ง (หลังจากที่คุณพบวิธีการใช้งาน)

— Andreas Dolk

5

ฉันพบวิธีที่รวดเร็วที่สุดในการค้นหาฟังก์ชันสากลคือ:

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

— Chris Robinson
แหล่งที่มา

1

ใน Google chrome เครื่องมือตรวจสอบองค์ประกอบคุณสามารถดูนิยามฟังก์ชัน Javascript ใด ๆ

คลิกที่แท็บแหล่งที่มา จากนั้นเลือกหน้าดัชนี ค้นหาฟังก์ชั่น

เลือกฟังก์ชั่นจากนั้นคลิกขวาที่ฟังก์ชั่นแล้วเลือก "ประเมินข้อความที่เลือกในคอนโซล"

— subhro
แหล่งที่มา

1

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

อ่านเพิ่มเติม :

Chrome DevTools> การอ้างอิงการดีบัก JavaScript

— KyleMit
แหล่งที่มา

0

ฉันมีปัญหาคล้ายกันในการค้นหาแหล่งที่มาของวิธีการของวัตถุ ชื่อวัตถุที่เป็นและวิธีการของมันคือmyTree loadฉันใส่เบรกพอยต์บนบรรทัดที่เรียกว่าเมธอด เมื่อโหลดหน้านี้อีกครั้งการดำเนินการจะหยุดลงที่จุดนั้น จากนั้นบนคอนโซล DevTools ฉันพิมพ์วัตถุพร้อมกับชื่อวิธีเช่นmyTree.loadและกด Enter คำนิยามของวิธีการพิมพ์บนคอนโซล:

นอกจากนี้โดยการคลิกขวาที่คำนิยามคุณสามารถไปที่คำจำกัดความในซอร์สโค้ด:

— Abdollah
แหล่งที่มา