คุณจะเปิดตัวดีบักเกอร์ JavaScript ใน Google Chrome ได้อย่างไร

418

เมื่อใช้ Google Chrome ฉันต้องการดีบักโค้ด JavaScript บางรหัส ฉันจะทำสิ่งนั้นได้อย่างไร

— Kevin Driedger
แหล่งที่มา

ดูวิธีเปิดคอนโซล JavaScript ในเบราว์เซอร์ที่แตกต่างกันอย่างไร ที่ Webmasters.SE

— Bergi

Developers.google.com/chrome-developer-tools/docs/…

— Davut Gürbüz

คุณอาจพบว่ามีประโยชน์: วิธียุติการใช้งานสคริปต์เมื่อเรียกดีบั๊กใน Google Chrome

— cssyphus

318

Windows: CTRL- SHIFT- Jหรือ F12

Mac: ⌥- ⌘-J

สามารถใช้งานได้ผ่านทางเมนูเครื่องมือ (เครื่องมือ> คอนโซล JavaScript):

เมนูคอนโซล JavaScript

— John Sheehan
แหล่งที่มา

23

ฉันคิดว่าทางลัดเปลี่ยนไปเป็น CTRL-SHIFT-J

— Martijn Laarman

5

หรือ Cmd-Shift-J สำหรับ Macs พระเจ้าฉันรัก<kbd>แท็กนี้ เสียดายที่ฉันไม่สามารถใช้มันในความคิดเห็นได้

— Anurag

11

ทางลัดของ Mac ดูเหมือนว่าจะAlt-Cmd-Jอยู่ในการสร้าง Chrome ล่าสุด

— Mathew Byrne

64

F12เป็นวิธีที่ง่ายที่สุด

— ฆ Mendes

การดูคำถามนี้ทำให้ฉันเข้าใจว่าทักษะจาวาสคริปต์ของฉันดีขึ้นจากระดับมือใหม่เป็นมาตรฐานที่ค่อนข้างดี

— Kamal Reddy

399

ลองเพิ่มสิ่งนี้ลงในแหล่งที่มาของคุณ:

debugger;

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

— Omer van Kloeten
แหล่งที่มา

มันยากที่จะค้นหาสิ่งที่เรียกว่าคำสั่งนี้หากคุณลืม!

— Ahmed Fasih

4

นอกจากนี้ยังเป็นเรื่องยากที่จะ google สำหรับเหตุผลที่มันไม่ทำงาน มีข้อ จำกัด ในเรื่องนี้หรือไม่?

— Seanonymous

2

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

— toon81

2

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

— Josh M.

3

@JoshM โปรดทราบว่าการทิ้งสิ่งนี้ไว้ในรหัสการผลิตนั้นแย่มากเพราะมันทำให้เกิดปัญหาใน IE บางรุ่นแม้ว่าผู้ใช้ที่ไม่มีเครื่องมือ dev เปิดอยู่

— Omer van Kloeten

57

Windows และ Linux:

Ctrl+ Shift+ Iกุญแจที่จะเปิดเครื่องมือสำหรับนักพัฒนา

Ctrl+ Shift+ Jเพื่อเปิดเครื่องมือสำหรับนักพัฒนาและนำโฟกัสไปยังคอนโซล

Ctrl+ Shift+ Cเพื่อสลับโหมดตรวจสอบองค์ประกอบ

Mac:

⌥+ ⌘+ Iกุญแจที่จะเปิดเครื่องมือสำหรับนักพัฒนา

⌥+ ⌘+ Jเพื่อเปิดเครื่องมือสำหรับนักพัฒนาและนำโฟกัสไปยังคอนโซล

⌥+ ⌘+ Cเพื่อสลับโหมดตรวจสอบองค์ประกอบ

แหล่ง

ทางลัดอื่น ๆ

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

3

สำหรับ mac shorcut to toggle โหมดตรวจสอบองค์ประกอบคือ shift Shift C (Shift - Command - C)

— Roberto Barros

15

กดปุ่มF12ฟังก์ชั่นในเบราว์เซอร์ Chrome เพื่อเปิดตัวดีบักเกอร์ JavaScript จากนั้นคลิก "สคริปต์"

เลือกไฟล์ JavaScript ที่ด้านบนและวางเบรกพอยต์ไปยังตัวดีบั๊กสำหรับโค้ด JavaScript

— Balachandar P
แหล่งที่มา

3

ดูเหมือนว่า F12 จะไม่สามารถเปิดตัวดีบั๊กในระบบ Windows 7 ของฉันด้วย Chrome 23.0.1246.0 dev-m

— astletron

+1 สำหรับ F12 ใช้ได้กับ IE, FF, Edge ไม่จำเป็นต้องเรียนรู้ Emacs เช่นการผสมคีย์ ยกเว้นสำหรับ Mac

— Csaba Toth

11

Ctrl+ Shift+ Jเปิดเครื่องมือสำหรับนักพัฒนา

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

6

ใน Chrome 8.0.552 บน Mac คุณสามารถหานี้ภายใต้เมนูดู / Developer / คอนโซล JavaScript ... หรือคุณสามารถใช้Alt+ +CMDJ

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

6

ที่นี่คุณสามารถค้นหาทางลัดเพื่อเข้าถึงเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์

https://developer.chrome.com/devtools/docs/shortcuts

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

2

Shift+ Control+ Iเปิดหน้าต่างเครื่องมือสำหรับนักพัฒนา จากภาพที่สองด้านล่างซ้าย (ที่มีลักษณะดังต่อไปนี้) จะเปิด / ซ่อนคอนโซลสำหรับคุณ:

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

2

หากต้องการเปิดแผง 'คอนโซล' โดยเฉพาะให้ทำดังนี้:

ใช้แป้นพิมพ์ลัด
- บน Windows และ Linux: Ctrl+ Shift+J
- บน Mac: Cmd+ Option+J
เลือกเมนู Chrome ไอคอนเมนู -> เครื่องมือ -> คอนโซล JavaScript หรือหากเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome เปิดอยู่แล้วpressแท็บ 'คอนโซล'

โปรดอ้างอิงที่นี่

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

1

สำหรับผู้ใช้ Mac ไปที่ Google Chrome - เมนู> ดู -> นักพัฒนา -> คอนโซล JavaScript

ภาพหน้าจอ

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

1

ตอนนี้ google chrome ได้แนะนำคุณสมบัติใหม่ โดยใช้คุณสมบัตินี้คุณสามารถแก้ไขรหัสของคุณในการเรียกดู Chrome (เปลี่ยนรหัสตำแหน่งอย่างถาวร)

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

ขอบคุณ

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

0

วิธีที่มีประสิทธิภาพที่สุดที่ฉันได้พบเพื่อดีบักเกอร์ javascript คือการใช้สิ่งนี้:

chrome://inspect

— Nestor Urquiza
แหล่งที่มา

0

F12 เปิดแผงผู้พัฒนา

CTRL + SHIFT + C จะเปิดเครื่องมือ hover-to-inspect ซึ่งจะเน้นองค์ประกอบเมื่อคุณเลื่อนและคุณสามารถคลิกเพื่อแสดงในแท็บองค์ประกอบ

CTRL + SHIFT + I เปิดแผงผู้พัฒนาพร้อมแท็บคอนโซล

คลิกขวา> ตรวจสอบ คลิกขวาที่องค์ประกอบใด ๆ แล้วคลิก "ตรวจสอบ" เพื่อเลือกในแท็บองค์ประกอบของแผงนักพัฒนาซอฟต์แวร์

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

— OG ฌอน
แหล่งที่มา

0

นี่คือเครื่องมือที่คุณเห็น

กด F12

— Johan Stiven Hernandez Osorio
แหล่งที่มา

-5

จากคอนโซลใน Chrome console.log(data_to_be_displayed)ที่คุณสามารถทำได้

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

3

สิ่งนี้จะไม่เปิดคอนโซล นี่จะเข้าสู่คอนโซลเท่านั้น

— Shaz