วิธีตั้งค่าเบรกพอยต์ใน Javascript แบบอินไลน์ใน Google Chrome

211

เมื่อฉันเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ใน Google Chrome ฉันเห็นคุณลักษณะทุกอย่างเช่นโปรไฟล์ไทม์ไลน์และการตรวจสอบ แต่ฟังก์ชั่นพื้นฐานเช่นความสามารถในการตั้งจุดพักทั้งในไฟล์ js และภายในโค้ด HTML และจาวาสคริปต์! ฉันพยายามใช้คอนโซล javascript ซึ่งเป็นรถตัวเอง - ตัวอย่างเช่นเมื่อพบข้อผิดพลาด JS ฉันไม่สามารถออกจากมันได้เว้นแต่ฉันจะรีเฟรชทั้งหน้า ใครช่วยได้บ้าง

javascript debugging google-chrome

— คนเก่ง
แหล่งที่มา

ฉันยอมแพ้กับ Chrome พยายามกับ Firefox และให้เบรกพอยต์ของฉันโดนภายในไม่กี่วินาที อาจเป็นไปได้ด้วย Chrome แต่ไม่ชัดเจนว่า!

— Oliver P

127

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

— Rian Schmits
แหล่งที่มา

31

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

— ulu

67

@ulu ฉันมีปัญหาเดียวกัน ตรวจสอบให้แน่ใจว่าแอตทริบิวต์ type = "text / javascript" ของคุณได้รับการตั้งค่าในองค์ประกอบ <script> ของคุณ

— contactmatt

9

ยกเว้นว่าใน HTML5 คุณลักษณะนี้จะไม่บังคับอีกต่อไป ฉันไม่ได้เปลี่ยนซอร์สโค้ดเพื่อแก้ปัญหา!

— sashok_bg

10

ฉันไม่เห็นแม้หลังจากเพิ่ม type = "text / javascript"

— Nitin Kumar Mishra

3

หากวิธีนี้ใช้ไม่ได้ผลและคุณมีรหัสจาวาสคริปต์แบบอินไลน์: <script> your code </script>เพิ่มชื่อดังนี้: <script> your code //# sourceURL=somename.js </script> นี่คือคำอธิบายที่ดีกว่าในคำตอบด้านล่าง

— KM

209

คุณกำลังพูดถึงรหัสภายใน<script>แท็กหรือในแท็กคุณสมบัติ HTML เช่นนี้?

<a href="#" onclick="alert('this is inline JS');return false;">Click</a>

ทั้งสองวิธีคำหลักเช่นนี้จะทำงาน:debugger

<a href="#" onclick="debugger; alert('this is inline JS');return false;">Click</a>

NB Chrome จะไม่หยุดที่debuggers ถ้าเครื่องมือ dev ไม่เปิด

คุณยังสามารถตั้งค่าจุดพักคุณสมบัติในไฟล์และ<script>แท็กJS :

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

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

— แมตต์บอล
แหล่งที่มา

4

ไม่มีแท็บสคริปต์ ฉันเห็นแท็บอื่น ๆ ทั้งหมดที่อยู่ในรูปภาพนี้ แต่ไม่มีแท็บสคริปต์!

— ace

5

ฉันหมายถึงความสามารถในการตั้งค่าเบรกพอยต์ภายในแท็ก scrip ใน html ฉันยังลองใช้ดีบักเกอร์ คำหลัก แต่มันไม่ทำงาน Chrome ไม่ได้หยุดอยู่แค่นั้น แต่ใช้งานได้ใน Firefox ฉันกำลังมองหาวิธีแก้ปัญหาเบรกพอยต์ไม่ได้ขึ้นอยู่กับคำหลักของดีบักเกอร์ซึ่งไม่สะดวกในการใส่จำนวนมากในสถานที่ในรหัสแล้วต้องลบ

— ace

2

ในเมนูแบบเลื่อนลงใต้แท็บสคริปต์ฉันเห็นเฉพาะไฟล์ JS ที่ระบุไว้ แต่ไม่ใช่ไฟล์ HTML ที่มีแท็ก <script> ที่ฉันต้องการตรวจแก้จุดบกพร่อง Firebug บน FF มีดร็อปดาวน์ที่คล้ายกัน แต่ยังแสดงไฟล์ HTML ที่มีแท็ก <script> นี่เป็นข้อผิดพลาดหรือมีวิธีอื่นในการตั้งค่าเบรกพอยต์ในโค้ด JS แบบอินไลน์หรือไม่

— Wolfram Arnold

8

แท็บถูกเรียกSourcesใช้แทนScriptsตอนนี้

— CoderDennis

1

เมื่อฉันพยายามที่จะแก้ปัญหา js ฝังตัว HTML ของฉันฉันได้หน้าว่างในพื้นที่ dev ของฉัน ฉันต้องรีเฟรชในขณะที่ดูไฟล์ต้นฉบับเปล่าเพื่อให้มันเติม

— HappyCoder86

73

คุณสามารถให้ชื่อสคริปต์ของคุณ:

<script> ... (your code here) //# sourceURL=somename.js </script>

ofcourse แทนที่ "somename" ด้วยชื่อบางอย่าง;) จากนั้นคุณจะเห็นมันในตัวดีบัก chrome ที่ "Sources> top> (ไม่มีโดเมน)> somename.js" เป็นสคริปต์ปกติและคุณจะสามารถดีบักเหมือนสคริปต์อื่น ๆ

— buildhome.eu
แหล่งที่มา

3

วิธีที่ง่ายที่สุดและสมบูรณ์แบบที่จะไป แต่ทราบสำหรับคนอื่นอย่าลืมลบมันก่อนที่จะผลักดันให้ผลิต

— Zameer Fouzan

2

โอ้พระเจ้าของฉันคุณไม่รู้ว่ามันช่วยฉันได้มากแค่ไหน โอ้พระเจ้าของฉันนี้ยอดเยี่ยม ฉันค้นหาสิ่งเหล่านี้มานานแล้ว

— GregRos

ฉันใช้แนวคิดนี้ (ละเอียด) แต่ไม่เห็นไฟล์ใหม่ในแท็บซอร์สไฟล์ html เท่านั้น จากนั้นฉันก็เรียกใช้โค้ดและในตอนท้ายในคอนโซลด้านขวาของข้อความใดก็ตามที่เขียนจากสคริปต์คุณจะเห็นลิงค์ไปยังโค้ด ส่วนที่ดีที่สุดคือลิงก์จะแสดงชื่อไฟล์ที่คุณให้กับสคริปต์ (เช่น // # sourceURL = somename.js)

— Manuel Rivera

1

ฉันจะให้คุณโหวต 1,000 ถ้าทำได้;) เคล็ดลับที่มีประโยชน์มาก

— Giulio Quaresima

43

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

— Gruff Bunny
แหล่งที่มา

สิ่งนี้ไม่ได้ผลสำหรับฉัน แต่ฉันคลิกที่ไอคอนข้อผิดพลาดของสคริปต์ที่ด้านล่างขวาเพื่อเปิดไฟล์โปรแกรมในแท็บสคริปต์

— sanbikinoraion

1

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

— Sam

นี่จะเป็นคำตอบที่ได้รับการยอมรับถ้านี่เป็นคำถามของฉัน ขอบคุณ.

— plumpNation

ทำงานใน Chrome 83 ใน env ของฉันชื่อไฟล์จะยึดตาม URL ของแอปของคุณ ตัวอย่างเช่นหาก URL คือ example.com/xxx/yyy ชื่อไฟล์จะเป็น "yyy"

— Helix Quar

18

เคล็ดลับง่ายๆอย่างหนึ่งในการแก้ไขข้อบกพร่องโดยเฉพาะอย่างยิ่งสคริปต์ใน html ที่ส่งคืนโดย ajax คือการวาง console.log ("test") ชั่วคราวไว้ในสคริปต์

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

PS: นอกจากนี้คุณสามารถลองใส่คำสั่ง "debugger" หากคุณใช้ chrome เช่นเดียวกับที่ @Matt Ball แนะนำ

— เคน
แหล่งที่มา

10

สถานการณ์ของฉันและสิ่งที่ฉันแก้ไขเพื่อแก้ไข:
ฉันมีไฟล์จาวาสคริปต์รวมอยู่ในหน้า HTML ดังนี้:
ชื่อหน้า: test.html

<!DOCTYPE html>
<html>
    <head>
        <script src="scripts/common.js"></script>
        <title>Test debugging JS in Chrome</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <div>
         <script type="text/javascript">
            document.write("something");
         </script>

        </div>
     </body>
</html>

ตอนนี้เข้าสู่ Javascript Debugger ใน Chrome ฉันคลิกแท็บ Scripts แล้ววางรายการตามที่แสดงด้านบน ฉันสามารถเห็นสคริปต์ / common.jsได้อย่างชัดเจนแต่ฉันไม่เห็นหน้า html ปัจจุบันtest.htmlในเมนูแบบเลื่อนลงดังนั้นฉันจึงไม่สามารถดีบักจาวาสคริปต์ที่ฝังอยู่:

<script type="text/javascript">
  document.write("something");
</script>

นั่นเป็นเรื่องที่น่างงงวย อย่างไรก็ตามเมื่อฉันลบล้าสมัยtype = "text / javascript"จากสคริปต์ฝังตัว:

<script>
  document.write("something");
</script>

.. และรีเฟรช / โหลดหน้าเว็บอีกครั้ง voila ปรากฏในรายการแบบหล่นลงและทุกอย่างก็ดีอีกครั้ง
ฉันหวังว่านี่จะเป็นประโยชน์กับทุกคนที่มีปัญหาในการดีบัก javascript แบบฝังในหน้า html

— Aditya Singh
แหล่งที่มา

เยี่ยมมาก! ทดสอบใน Chrome 20.0.1132.57 บน Mac 10.7.4 ข้อผิดพลาดที่ส่งไปยังโครงการ Chromium

— Mars Robertson

โปรดทราบว่าใน HTML 4 และ XHTML typeนั้นเป็นคุณสมบัติที่จำเป็น ใน HTML5 เป็นตัวเลือก

— hotshot309

2

มันไม่มีอะไรเกี่ยวข้องกับประเภท VM จะรวบรวมสคริปต์หลังจากดำเนินการยกเว้นว่าผู้ตรวจสอบเปิดขึ้นแล้ว เมื่อคุณโหลดหน้าซ้ำอีกครั้งมันจะไม่รวบรวมสคริปต์

— vsevik

ฉันเป็นกรณีของฉันการขาดหายไป<div>ทำให้ฉันไม่เห็นรหัสในโปรแกรมดีบั๊ก

— ceztko

5

การเพิ่มส่วนdebugger;บนของสคริปต์ทำงานให้ฉัน

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

4

ฉันมีปัญหาเดียวกันเช่นกันวิธีแก้ไขข้อบกพร่องของ JavaScript ที่อยู่ภายใน<script>แท็ก แต่จากนั้นฉันก็พบว่ามันอยู่ใต้แท็บ Sources เรียกว่า "(index)" พร้อมเครื่องหมายวงเล็บ คลิกหมายเลขบรรทัดเพื่อตั้งจุดพัก

นี่คือ Chrome 71

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

2

หากคุณไม่เห็นแท็บ "สคริปต์" ตรวจสอบให้แน่ใจว่าคุณเปิดใช้ Chrome ด้วยอาร์กิวเมนต์ที่ถูกต้อง ฉันมีปัญหานี้เมื่อฉันเปิดตัว Chrome สำหรับการแก้จุดบกพร่องด้านเซิร์ฟเวอร์ JavaScript --remote-shell-port=9222กับการโต้แย้ง ฉันไม่มีปัญหาหากเปิด Chrome โดยไม่มีข้อโต้แย้ง

— เทวดาตกสวรรค์
แหล่งที่มา

คุณช่วยอธิบายได้มั้ย ฉันมีปัญหาตรงนี้ - ไม่เห็นแท็บสคริปต์เลย ฉันดาวน์โหลดรุ่นสำหรับนักพัฒนาซอฟต์แวร์ Chrome ล่าสุด

— tom redfern

2

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

นั่นหมายความว่าเมื่อฉันเปิดมุมมองเฉพาะด้วยอินไลน์ของฉัน (ไม่มีตัวเลือกในสิ่งนี้) มันไม่สามารถเข้าถึงได้

วิธีเดียวที่ฉันสามารถตีก็คือการวางฟังก์ชั่นที่ผิดพลาดหรือโทรภายในฟังก์ชั่น JS แบบอินไลน์

โซลูชันของฉันรวมอยู่ด้วย:

function doMyInline(data) {
        //Throw my undefined error here. 
        $("select.Sel").debug();

        //This is the real onclick i was passing to 
        angular.element(document.getElementById(data.id)).scope().doblablabla(data.id);
    }

นี่หมายความว่าเมื่อฉันคลิกที่ปุ่มของฉันฉันได้รับแจ้งในคอนโซลโครเมี่ยม

Uncaught TypeError: undefined is not a function

สิ่งสำคัญนี่คือที่มาของสิ่งนี้: VM5658:6คลิกที่สิ่งนี้ทำให้ฉันสามารถก้าวผ่านอินไลน์และหยุดจุดพักไว้ที่นั่นในภายหลัง ..

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

VM[n]ไม่มีคุณค่าที่สำคัญและnในเท่ากับ ID สคริปต์ ข้อมูลนี้อยู่ที่นี่: Chrome "[VM]"

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

1

ใช้Visual Studio (2012) ฉันมีปัญหาเดียวกันและเปลี่ยนเป็นIIS Expressแก้ปัญหาได้!

scriptแท็กtypeแอตทริบิวต์ไม่ได้ปัจจัยที่เป็นมัน

ด้วยเหตุผลบางอย่างVisual Studio Development Serverไม่ได้ให้ทุกสิ่งที่ Chrome ต้องการเพื่อเปิดใช้งานเบรกพอยต์

— หลบหนี LLC
แหล่งที่มา

1

ฉันรู้ว่าคิวไม่เกี่ยวกับ Firefoxแต่ฉันไม่ต้องการที่จะเพิ่มสำเนาของคำถามนี้เพียงแค่ตอบด้วยตัวเอง

สำหรับ Firefox คุณต้องเพิ่ม debugger;เพื่อให้สามารถทำสิ่งที่@ matt-ballแนะนำสำหรับscriptแท็ก

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

หากนี่ไม่ใช่สถานที่ในการเพิ่มคำตอบของ Firefox เนื่องจากคำถามนั้นเกี่ยวกับ Chrome อย่า :( ลบคำตอบเพียงแจ้งให้ฉันทราบว่าฉันควรโพสต์ที่ใดและฉันจะย้ายโพสต์อย่างมีความสุข :)

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

0

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

— แพทริเซี
แหล่งที่มา