เปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome โดยอัตโนมัติเมื่อเปิดแท็บใหม่ / หน้าต่างใหม่

252

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

มีวิธีใดบ้างที่จะเปิดเครื่องมือนักพัฒนาซอฟต์แวร์โดยอัตโนมัติเมื่อเปิดหน้าต่างใหม่ใน Chrome

google-chrome google-chrome-devtools

— Alexander Sirobaba
แหล่งที่มา

ฉันชอบที่จะรู้เรื่องนี้เช่นกัน วิธีเดียวที่ฉันค้นพบคือการแก้ไขแหล่งที่มาเช่นเดียวกับผู้ชายคนนี้: [link] groups.google.com/forum/?fromgroups=#!topic/…

— zone117x

ฉัน scoured สวยยากและสิ่งที่ใกล้เคียงที่สุดที่ฉันสามารถหาได้คือสร้างบานหน้าต่างใหม่ภายในเครื่องมือ dev พร้อมกับส่วนขยายของ Chrome

— TankorSmash

2

การใช้ SendKeys กับ Python คุณสามารถเปิด Chrome และส่ง+^jเพื่อจำลอง Ctrl Shift J แต่จะทำงานกับอินสแตนซ์ใหม่เท่านั้น คุณจะต้องได้รับความคิดสร้างสรรค์มากขึ้นกับซีลีเนียมหรือบางสิ่งบางอย่างเพื่อนำทางไปยังหน้าเว็บที่กำหนด ...

— TankorSmash

ใช่ฉันเห็นตัวแปรนี้ด้วย แต่มันไม่สามารถใช้ได้เมื่อคุณเปิดเครื่องมือ dev สำหรับแท็บใหม่แต่ละแท็บที่เปิด

— Alexander Sirobaba

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

— Patrick M

89

อัปเดต 2:

ดูคำตอบนี้ - 2019-11-05

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

UPDATE:

เวลามีการเปลี่ยนแปลงตอนนี้คุณสามารถใช้ - อัตโนมัติเปิด - devtools สำหรับแท็บในคำตอบนี้ - Wouter Huysentruit 18 พฤษภาคมเวลา 11:08 น

OP:

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

เรียกดูฟอรัมผลิตภัณฑ์ Google ดูเหมือนจะไม่มีวิธีการติดตั้งใน Chrome คุณจะต้องใช้การกดแป้นพิมพ์หรือF12ตามที่กล่าวไว้ข้างต้น

ฉันแนะนำมันเป็นคุณสมบัติ ฉันรู้ว่าฉันไม่ใช่คนแรก

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

1

@ Seanny123: แก้ไขแล้ว! หากคุณต้องการสิ่งนี้เป็นคุณสมบัติโปรด

— อย่า

1

@Chiperific คุณบอกว่าคุณเล่นรอบสตริงการเริ่มต้นสำหรับ Chrome ที่ทำงาน แต่ไม่สามารถคงอยู่กับแท็บใหม่ได้ ฉันต้องการพฤติกรรมนี้เมื่อเริ่มต้นเพียงหนึ่งแท็บอย่างไรก็ตาม คุณสามารถแชร์วิธีที่คุณใช้กับแท็บเดียวเท่านั้นได้หรือไม่

— Martin Braun

10

เวลามีการเปลี่ยนแปลงตอนนี้คุณสามารถใช้--auto-open-devtools-for-tabsในขณะที่คำตอบนี้

— huysentruitw

2

โปรดพิจารณาแก้ไขคำตอบของคุณ มันล้าสมัย แต่ยังคงปรากฏให้เห็นใน SO

— yannick1976

4

คำสั่งแบบเต็มสำหรับ OS X คือ (ออกจากกระบวนการ Chrome ที่รันอยู่ก่อน):/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --auto-open-devtools-for-tabs

— Lane Rettig

189

F1เกี่ยวกับการเปิดเครื่องมือสำหรับนักพัฒนาที่มีหน้าต่างเครื่องมือสำหรับนักพัฒนาในการมุ่งเน้นให้กด นี่จะเป็นการเปิดหน้าการตั้งค่า ตรวจสอบ "ป๊อปอัพ DevTools ที่เปิดอัตโนมัติ"

สิ่งนี้ใช้ได้สำหรับฉัน

— นักบุญ
แหล่งที่มา

13

งานนี้และเป็นสิ่งที่ OP ขอมาจริง ๆ มันควรถูกทำเครื่องหมายเป็นคำตอบที่ถูกต้อง

— Rui

1

นอกจากนี้ยังไม่ทำงานกับฉันด้วย WebStorm หน้าเปิดขึ้น แต่ไม่มีเครื่องมือ dev

— Mörre

3

ใช้งานได้ แต่ตัวเลือก "เก็บบันทึก" จะไม่ถูกตรวจสอบเสมอและหากป๊อปอัปเปลี่ยนเส้นทางจะไม่แสดงคำขอเครือข่ายก่อนหน้า ความคิดใด ๆ ที่จะทำให้มันรักษาบันทึกโดยค่าเริ่มต้น?

— กำหนดเวลา

1

นี้จะทำงานเฉพาะสำหรับย่อยเฉพาะกรณีโปรดดูbugs.chromium.org/p/chromium/issues/detail?id=410958#c87 มันไม่ใช่ทางออกทั่วไป

— Lane Rettig

1

ไม่ทำงานเมื่อเริ่มต้นจากรหัส VS ด้วยส่วนขยายการดีบัก Chome

— VanAlbert

80

มีสวิตช์บรรทัดคำสั่งสำหรับสิ่งนี้: --auto-open-devtools-for-tabs

ดังนั้นสำหรับคุณสมบัติบน Google Chrome ให้ใช้สิ่งนี้:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --auto-open-devtools-for-tabs

นี่คือลิงค์ที่มีประโยชน์: chromium-command-line-switches

— เดวิด
แหล่งที่มา

1

วิธีนี้ใช้ได้ผลแน่นอนและควรทำเครื่องหมายว่าเป็นคำตอบที่ยอมรับในขณะนี้ ตรวจหาโครเมียมVersion 50.0.2661.102 Ubuntu 15.10 (64-bit)แล้วเปิดแบบนี้chromium-browser --auto-open-devtools-for-tabs

— Olga

6

สิ่งนี้ใช้ไม่ได้กับ Windows 7 รุ่น 51.0.2704.103 m

— PetroCliff

7

คำสั่งแบบเต็มสำหรับ OS X คือ (ออกจากกระบวนการ Chrome ที่รันอยู่ก่อน):/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --auto-open-devtools-for-tabs

— Lane Rettig

2

ไม่ทำงานกับเวอร์ชัน 59.0.3071.115 (รุ่นเป็นทางการ) (64 บิต)

— Gustavo Straube

ทำงานในกรณีการใช้งานของฉันไม่เหมือนกับคำตอบของ Saint

— Markus Barthlen

28

ใน Mac: ออกจาก Chrome จากนั้นเรียกใช้คำสั่งต่อไปนี้ในหน้าต่างเทอร์มินัล:

open -a "Google Chrome" --args --auto-open-devtools-for-tabs

— Erin Mills
แหล่งที่มา

ในการชี้แจง: สิ่งนี้จะเปิด Chrome พร้อมauto-open-devtools-for-tabsชุดธง การเลิกใช้ Chrome และเปิดใหม่อีกครั้งโดยใช้ทางลัดแอปพลิเคชันปกติจะเปิด Chrome โดยไม่ตั้งค่าสถานะ หากคุณต้องการให้ทางลัดในการเปิด Chrome ด้วยการตั้งค่าสถานะนี้โดยไม่ต้องเปิดหน้าต่างเทอร์มินัลคุณสามารถสร้างเวิร์กโฟลว์ใน Automator เพิ่มรายการ "Run Shell Script" และวางในสคริปต์ด้านบน การบันทึกเวิร์กโฟลว์เป็นแอปพลิเคชันจะสร้างแอปที่คลิกได้ ดูคำตอบนี้ในหัวข้ออื่น: stackoverflow.com/a/281455/1512790

— Rick Gladwin

17

ภายใต้การตั้งค่า Chrome DevTools คุณเปิดใช้งาน:

ภายใต้เครือข่าย -> เก็บบันทึกข้อมูลภายใต้ DevTools -> เปิด DevTools อัตโนมัติสำหรับป๊อปอัป

— Andrew Patterson
แหล่งที่มา

คำตอบที่ดีที่สุด IMO

— Chase Miller

2

คำตอบที่ดี แต่อธิบายสำหรับ linux: ไปที่คอนโซลนักพัฒนาซอฟต์แวร์ ไปที่เมนูแฮมเบอร์เกอร์ คลิกการตั้งค่า (หรือ f1) ในส่วนเครือข่ายตรวจสอบรักษาบันทึก ในส่วน devtools ให้ตรวจสอบ devtools แบบเปิดอัตโนมัติสำหรับป๊อปอัป

— JDPeckham

9

F12 ง่ายกว่า Ctrl + Shift + I

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

2

ถ้าคุณอยู่บน Windows หรือ Linux

— Gianfranco P.

1

กด f12 บน macbook หรือมือโปรคุณต้องทำ fn + f12 (ล่างซ้ายสุดสุด + ขวาบนสุดสุดขีด) ซึ่งไม่สะดวกสำหรับผู้ใช้แป้นพิมพ์ส่วนใหญ่

— Seth McClaine

ใช้งานได้ดีบน linux ... เหตุผลอีกประการที่ต้องเปลี่ยน ทำบน Mac Pro มันไม่สมบูรณ์ แต่ยังดีกว่า Apple OS

— Ray Foss

5

ด้วยเครื่องมือสำหรับนักพัฒนาหน้าต่างปรากฏให้คลิกไอคอนเมนู (จุดสามจุดในแนวตั้งที่มุมบนขวา) และคลิกการตั้งค่า

ภายใต้เครื่องมือ Devให้ตรวจสอบตัวเลือกDevTools ที่เปิดอัตโนมัติสำหรับป๊อปอัป

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

4

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

— George Griffin
แหล่งที่มา

4

ใครก็ตามที่ต้องการทำสิ่งนี้ภายใน Visual Studio บทความโครงการรหัสนี้จะช่วย เพียงแค่เพิ่ม "- อัตโนมัติเปิด open-devtools สำหรับแท็บ" ในกล่องอาร์กิวเมนต์ ทำงานในปี 2560

— Ron Rebennack
แหล่งที่มา

ในกรณีที่โค้ดหน้าโครงการหายไป: คุณไปที่ดรอปดาวน์ดำเนินการเลือกเรียกดูด้วย ... เพิ่ม ... โปรแกรมเป็นดังนี้: C: \ Program Files (x86) \ Google \ Chrome \ Application \ chrome .exe และอาร์กิวเมนต์: - auto-open-devtools สำหรับแท็บ -incognito (ไม่ระบุตัวตนเป็นตัวเลือก)

— Dustin_00

4

หากคุณใช้ Visual Studio Code (vscode) ให้ใช้ vscode chrome debug ส่วนขยายที่ได้รับความนิยมมาก ( https://github.com/Microsoft/vscode-chrome-debug ) คุณสามารถตั้งค่าไฟล์กำหนดค่าการเปิดตัวlaunch.jsonและระบุเพื่อเปิดเครื่องมือนักพัฒนาในระหว่าง เซสชันดีบัก

สิ่งนี้ที่launch.jsonฉันใช้สำหรับโครงการตอบโต้ของฉัน:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000",
      "runtimeArgs": ["--auto-open-devtools-for-tabs"],
      "webRoot": "${workspaceRoot}/src"
    }
  ]
}

เส้นที่สำคัญคือ "runtimeArgs": ["--auto-open-devtools-for-tabs"],

จาก vscode คุณสามารถพิมพ์F5ได้ Chrome เปิดแอปและแท็บคอนโซลด้วย

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

1

ใช่มีวิธีที่คุณสามารถทำได้

คลิกขวา -> ตรวจสอบ -> แหล่งข้อมูล (แท็บ)
ไปทางขวามือจะมีปุ่ม "หยุดการทำงานสคริปต์ชั่วคราว"

ฉันหวังว่ามันจะช่วย!

PS: นี่เป็นครั้งแรกตั้งแต่ครั้งที่สองเป็นต้นไปเครื่องมือ dev จะโหลดโดยอัตโนมัติ

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

0

ใช้การ--auto-open-devtools-for-tabsตั้งค่าสถานะในขณะที่ใช้งานโครเมี่ยมจากบรรทัดคำสั่ง

/ Applications / Google \ Chrome.app/Contents/MacOS/Google \ Chrome - auto-open-devtools-for-tab

https://developers.google.com/web/tools/chrome-devtools/open#auto

— นกเล็กชนิดหนึ่ง
แหล่งที่มา

-6

คุณสามารถเปิด Dev เครื่องมือ ( F12ใน Chrome) ในหน้าต่างใหม่โดยที่มุมด้านล่างขวาและเลือกclicking three, vertical dotsOpen as Separate Window

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