Làm cách nào để đặt điểm dừng trong Javascript nội tuyến trong Google Chrome?

210

Khi tôi mở Công cụ dành cho nhà phát triển trong Google Chrome, tôi thấy tất cả các loại tính năng như Tiểu sử, Dòng thời gian và Kiểm toán, nhưng chức năng cơ bản như có thể đặt điểm dừng cả trong tệp js và trong mã html và javascript bị thiếu! Tôi đã cố gắng sử dụng bảng điều khiển javascript, bản thân nó là lỗi - ví dụ, một khi nó gặp lỗi JS, tôi không thể thoát khỏi nó trừ khi tôi làm mới toàn bộ trang. Ai đó có thể giúp gì không?

javascript debugging google-chrome

— át chủ
nguồn

Tôi đã từ bỏ với Chrome. Đã thử với Firefox và đã có điểm dừng của tôi trong vòng vài giây. Có thể với Chrome nhưng chắc chắn là không rõ ràng như thế nào!

— Oliver P

126

Sử dụng tab nguồn, bạn có thể đặt điểm dừng trong JavaScript ở đó. Trong cây thư mục bên dưới nó (với mũi tên lên xuống trong đó), bạn có thể chọn tệp bạn muốn gỡ lỗi. Bạn có thể thoát khỏi một lỗi bằng cách nhấn sơ yếu lý lịch ở phía bên phải của cùng một tab.

— Rian Schmits
nguồn

31

Vì một số lý do tôi thấy danh sách các tệp js được bao gồm, nhưng tôi không thể chọn chính trang thực thi, nó không hiển thị trong danh sách. Có ý kiến gì không?

— ulu

67

@ulu, tôi đã có cùng một vấn đề. Đảm bảo thuộc tính type = "text / javascript" của bạn được đặt trên phần tử <script> của bạn.

— contactmatt

9

ngoại trừ trong HTML5, thuộc tính này không còn bắt buộc. Tôi không thay đổi mã nguồn chỉ để gỡ lỗi!

— sashok_bg

10

Tôi không thấy ngay cả sau khi thêm type = "text / javascript"

— Nitin Kumar Mishra

2

nếu điều này không hoạt động và bạn có mã javascript nội tuyến như: <script> your code </script>thêm vào một tên như: <script> your code //# sourceURL=somename.js </script> Điều này được giải thích tốt hơn trong câu trả lời dưới đây

— KM.

209

Bạn đang nói về mã trong <script>các thẻ hoặc trong các thuộc tính thẻ HTML, như thế này?

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

Dù bằng cách nào, các debuggertừ khóa như thế này sẽ làm việc:

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

NB Chrome sẽ không tạm dừng tại debuggers nếu các công cụ dev không mở.

Bạn cũng có thể đặt các điểm dừng thuộc tính trong các tệp và <script>thẻ JS :

Nhấp vào tab Nguồn
Nhấp vào Trình điều hướng biểu tượng và chọn tệp
Bấm đúp vào số dòng ở lề bên trái. Một hàng tương ứng được thêm vào bảng Breakpoint (4).

nhập mô tả hình ảnh ở đây

— Bóng Matt
nguồn

4

Không có tab ScScript. Tôi thấy tất cả các tab khác có trong ảnh này nhưng không có tab ScScript!.

— ace

5

Tôi có nghĩa là có thể đặt điểm dừng trong thẻ scrip trong html. Tôi cũng đã thử sử dụng trình gỡ lỗi; từ khóa nhưng nó không hoạt động. Chrome không dừng lại ở đó nhưng nó hoạt động trong Firefox. Tôi đang tìm kiếm giải pháp điểm dừng không dựa trên từ khóa gỡ lỗi, điều này gây bất tiện khi đặt nhiều vị trí trong mã và sau đó phải xóa.

— ace

2

Trong trình đơn thả xuống bên dưới tab Tập lệnh, tôi chỉ thấy các tệp JS được liệt kê, nhưng không phải các tệp HTML có chứa thẻ <script> mà tôi muốn gỡ lỗi. Fireorms trên FF có trình đơn thả xuống tương tự, nhưng cũng liệt kê các tệp HTML có chứa các thẻ <script>. Đây có phải là một lỗi hay có cách nào khác để đặt điểm dừng trong mã JS được nội tuyến không?

— Wolfram Arnold

8

Các tab được gọi Sourcesthay vì Scriptsbây giờ.

— CoderDennis

1

Khi tôi cố gắng gỡ lỗi js nhúng html của mình, tôi đã nhận được một trang trống trong khu vực nhà phát triển của mình. Tôi đã phải làm mới trong khi nhìn vào tệp nguồn trống để đưa nó vào.

— HappyCoder86

72

Bạn cũng có thể đặt tên cho tập lệnh của mình:

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

ofcference thay thế "somename" bằng một số tên;) và sau đó bạn sẽ thấy nó trong trình gỡ lỗi chrome tại "Nguồn> top> (không có tên miền)> somename.js" như một tập lệnh thông thường và bạn sẽ có thể gỡ lỗi nó như các tập lệnh khác

— buildhome.eu
nguồn

3

cách dễ nhất và hoàn hảo để đi. nhưng lưu ý cho những người khác, hãy nhớ loại bỏ nó trước khi đẩy nó vào sản xuất.

— Zameer Fouzan

2

Ôi chúa ơi, bạn không biết điều này đã giúp tôi bao nhiêu. Ôi trời ơi thật là tuyệt vời. Tôi đã tìm kiếm một cái gì đó như thế này từ lâu.

— GregRos

Tôi đã sử dụng ý tưởng (tốt) này, nhưng không thể thấy tệp mới trong tab nguồn, chỉ có tệp html. Sau đó, tôi đã thực thi mã và, ở cuối, trong bảng điều khiển, ở bên phải của bất kỳ thông báo nào được viết từ tập lệnh, bạn có thể thấy một liên kết đến mã. Phần tốt nhất là liên kết hiển thị tên tệp bạn đã đặt cho tập lệnh (ví dụ: // # sourceURL = somename.js).

— Manuel Rivera

1

Tôi sẽ cung cấp cho bạn 1000 lượt upvote nếu tôi có thể;) Thủ thuật rất hữu ích

— Giulio Quaresima

43

Làm mới trang chứa tập lệnh trong khi các công cụ dành cho nhà phát triển được mở trên tab tập lệnh. Điều này sẽ thêm một mục (chương trình) trong danh sách tập tin hiển thị html của trang bao gồm tập lệnh. Từ đây bạn có thể thêm điểm dừng.

— Bunny cộc cằn
nguồn

Điều này đã không làm việc cho tôi. Thay vào đó, tôi nhấp vào biểu tượng lỗi tập lệnh ở dưới cùng bên phải để mở tệp chương trình trong tab tập lệnh.

— sanbikinoraion

1

Cảm ơn! Sử dụng Chrome 69, điều này hoạt động ngay cả khi tôi không ở trong tab nguồn. Có các công cụ dành cho nhà phát triển mở trong khi trang được tải dường như là chìa khóa.

— Sam

Đây sẽ là câu trả lời được chấp nhận nếu đây là câu hỏi của tôi. Cảm ơn bạn.

— plumpNation

Đã hoạt động trong Chrome 83. Trong env của tôi, tên tệp được dựa trên URL của ứng dụng của bạn. Ví dụ: nếu URL là example.com/xxx/yyy, tên tệp sẽ là "yyy".

— Helix Quar

18

Một mẹo đơn giản trực quan khác để gỡ lỗi, đặc biệt là tập lệnh bên trong html được trả về bởi ajax, là tạm thời đặt console.log ("test") bên trong tập lệnh.

Khi bạn đã khởi động sự kiện, hãy mở tab giao diện điều khiển bên trong các công cụ dành cho nhà phát triển. bạn sẽ thấy liên kết tệp nguồn được hiển thị ở bên phải của câu lệnh in gỡ lỗi "kiểm tra". chỉ cần nhấp vào nguồn (một cái gì đó như VM4xxx) và bây giờ bạn có thể đặt điểm dừng.

PS: bên cạnh đó, bạn có thể xem xét đưa ra câu lệnh "gỡ lỗi" nếu bạn đang sử dụng chrome, giống như những gì đang được đề xuất bởi @Matt Ball

— ken
nguồn

10

Tình hình của tôi và những gì tôi đã làm để khắc phục nó:
Tôi có một tệp javascript được bao gồm trên một trang HTML như sau:
Tên trang: 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>

Bây giờ khi nhập Trình gỡ lỗi Javascript trong Chrome, tôi nhấp vào Tab Tập lệnh và thả xuống danh sách như được hiển thị ở trên. Tôi có thể thấy rõ các tập lệnh / common.js tuy nhiên tôi KHÔNG thể thấy trang html hiện tại test.html trong trình đơn thả xuống, do đó tôi không thể gỡ lỗi javascript được nhúng:

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

Đó là sự bối rối. Tuy nhiên, khi tôi xóa loại lỗi thời = "text / javascript" khỏi tập lệnh nhúng:

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

..và làm mới / tải lại trang, thì đấy, nó xuất hiện trong danh sách thả xuống, và tất cả đã hoạt động tốt trở lại.
Tôi hy vọng điều này hữu ích cho bất kỳ ai đang gặp sự cố gỡ lỗi javascript nhúng trên trang html.

— Aditya Singh
nguồn

Làm tốt lắm! Đã thử nghiệm trong Chrome 20.0.1132.57 trên Mac 10.7.4 Đã gửi lỗi cho dự án Chromium.

— Mars Robertson

Xin lưu ý rằng trong HTML 4 và XHTML, typelà một thuộc tính bắt buộc. Trong HTML5, nó là tùy chọn.

— hotshot309

2

Nó không có gì để làm với loại. Kịch bản được VM thu thập sau khi thực thi trừ khi thanh tra đã được mở tại thời điểm này. Khi bạn tải lại trang, nó không thu thập tập lệnh.

— vsevik

Tôi là trường hợp của tôi, mất tích <div>đã ngăn tôi xem mã trong trình gỡ lỗi

— ceztko

5

Thêm debugger;vào đầu tại kịch bản của tôi làm việc cho tôi.

— JEKO
nguồn

4

Tôi cũng gặp vấn đề tương tự, làm thế nào để gỡ lỗi JavaScript nằm trong <script>thẻ. Nhưng sau đó tôi tìm thấy nó trong tab Nguồn, được gọi là "(chỉ mục)", với dấu ngoặc đơn. Nhấp vào số dòng để đặt điểm dừng.

Đây là Chrome 71.

— ocarlsen
nguồn

2

Nếu bạn không thể thấy tab "Tập lệnh", hãy đảm bảo bạn đang khởi chạy Chrome với các đối số phù hợp. Tôi gặp vấn đề này khi tôi khởi chạy Chrome để gỡ lỗi JavaScript phía máy chủ với đối số --remote-shell-port=9222. Tôi không có vấn đề gì nếu tôi khởi chạy Chrome mà không có đối số.

— Thiên thần sa ngã
nguồn

Bạn có thể giải thích xin vui lòng? Tôi đang gặp vấn đề chính xác này - không thể thấy tab script nào cả. Tôi đã tải xuống bản phát triển mới nhất của chrome.

— tom redfern

2

Tôi đã gặp vấn đề này, tuy nhiên chức năng nội tuyến của tôi đã từ bỏ chế độ xem angularJS. Do đó, khi tải, tôi không thể truy cập tập lệnh nội tuyến để thêm gỡ lỗi, vì chỉ có index.html có sẵn trong tab nguồn của trình gỡ lỗi.

Điều này có nghĩa là khi tôi đang mở chế độ xem cụ thể bằng nội tuyến của mình (không có lựa chọn nào về điều này) thì không thể truy cập được.

Cách trực tiếp mà tôi có thể đạt được là đặt một hàm sai hoặc gọi bên trong hàm JS nội tuyến.

Giải pháp của tôi bao gồm:

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);
    }

Điều này có nghĩa là khi tôi nhấp vào nút của mình, sau đó tôi đã được nhắc nhở trong an ủi chrome.

Uncaught TypeError: undefined is not a function

Điều quan trọng ở đây là nguồn gốc của điều này: VM5658:6 nhấp vào điều này cho phép tôi bước qua nội tuyến và giữ điểm dừng ở đó để sau này ..

Cách tiếp cận cực kỳ phức tạp để tiếp cận nó .. Nhưng nó đã hoạt động và có thể chứng minh hữu ích khi xử lý các ứng dụng Trang đơn tải động các lượt xem của bạn.

Không VM[n]có giá trị đáng kể và nbật tương đương với ID tập lệnh. Thông tin này có thể được tìm thấy ở đây: Chrome "[VM]"

— Pogrindis
nguồn

1

Sử dụng Visual Studio (2012) Tôi gặp vấn đề tương tự và chuyển sang IIS Express giải quyết được vấn đề!

Các scriptthẻ làtype thuộc tính không yếu tố vào nó.

Vì một số lý do, Máy chủ Phát triển Visual Studio không cung cấp mọi thứ Chrome cần để kích hoạt các điểm dừng.

— thoát-llc
nguồn

1

Tôi biết Q không phải là về Firefoxnhưng tôi không muốn thêm một bản sao của câu hỏi này để tự trả lời nó.

Đối với Firefox, bạn cần thêm debugger;để có thể thực hiện những gì @ matt-ball đã đề xuất choscript thẻ.

Vì vậy, trên mã của bạn, bạn thêm debuggerphía trên dòng bạn muốn gỡ lỗi và sau đó bạn có thể thêm các điểm dừng. Nếu bạn chỉ đặt các điểm dừng trên trình duyệt thì nó sẽ không dừng.

Nếu đây không phải là nơi để thêm câu trả lời của Firefox thì câu hỏi đó là về Chrome. Đừng :( trừ câu trả lời chỉ cho tôi biết tôi nên đăng nó ở đâu và tôi sẽ vui vẻ chuyển bài. :)

— T04435
nguồn

0

Đây là phần mở rộng của câu trả lời của Rian Schmits ở trên. Trong trường hợp của tôi, tôi đã có mã HTML được nhúng trong mã JavaScript của mình và tôi không thể thấy bất cứ điều gì ngoài mã HTML. Có thể Chrome Debugging đã thay đổi qua nhiều năm nhưng nhấp chuột phải vào tab Nguồn / Nguồn đã đưa cho tôi thư mục Thêm vào không gian làm việc . Tôi đã có thể thêm toàn bộ dự án của mình, điều này cho phép tôi truy cập vào tất cả các JavaScripts của mình. Bạn có thể tìm thấy chi tiết hơn trong liên kết này . Tôi hi vọng nó sẽ giúp ích cho mọi người.

— Patricia
nguồn