Có thể thay đổi giá trị biến javascript trong khi gỡ lỗi trong Google Chrome không?


81

Tôi đang gỡ lỗi một ứng dụng javascript (sử dụng các công cụ dành cho nhà phát triển Chrome) và tôi muốn thay đổi một số giá trị biến trong khi xem qua mã.

Liệu có thể không?

Tôi đã thử và nhận được một cái gì đó như:

> modeline
1
> modeline=0
0             <<< seems to work but... 
> modeline
1             <<< ups!!

Nhưng tôi không thể tìm thấy bất kỳ tài liệu nào nêu rõ những gì có thể hoặc không thể làm được ...


Đăng một số mã. Từ đâu modelineđến?
Emil Ivanov

4
@Emil: Điều đó có quan trọng không? modeline là một biến toàn cục, tôi cũng đã thử sửa đổi nó bằng cách sử dụng window.modeline với kết quả tương tự. Nhưng câu hỏi này cũng có liên quan đến các biến địa phương tuyên bố bên trong một hàm
tato

4
Tôi có thể xác nhận hành vi này. Việc sửa đổi thuộc tính trên đối tượng JS trong Chrome dường như không có bất kỳ ảnh hưởng nào đến giá trị thực của đối tượng trong trình thông dịch. Trong Firefox, sửa đổi tương tự khiến tập lệnh js được đánh giá khác như bạn mong đợi. Một số loại bảo mật exstra trong trình duyệt Chrome? Có ai biết nếu nó có thể được bật trong Chrome, vì vậy bạn có thể sử dụng nó để gỡ lỗi js?
Nikolaj Hansen

1
Đã gửi một báo cáo lỗi cho điều này.
GreenGiant

1
Đã được triển khai trong V8: Số phát hành 2399 Hiện cần cập nhật Công cụ dành cho nhà phát triển của Chromium: Số phát hành 124206
gabrielmaldi

Câu trả lời:


39

Tại sao câu trả lời này vẫn nhận được sự ủng hộ?

Theo câu trả lời của Mikaël Mayer , đây không còn là vấn đề nữa và câu trả lời của tôi đã lỗi thời ( go()bây giờ trở lại 30sau khi kết nối với bảng điều khiển). Điều này đã được sửa vào tháng 7 năm 2013, theo báo cáo lỗi được liên kết ở trên trong bình luận của gabrielmaldi . Nó cảnh báo tôi rằng tôi vẫn nhận được sự ủng hộ - khiến tôi nghĩ rằng người ủng hộ không hiểu câu hỏi hoặc câu trả lời của tôi.

Tôi sẽ để lại câu trả lời ban đầu của mình ở đây vì lý do lịch sử, nhưng thay vào đó hãy ủng hộ câu trả lời của Mikaël .


Bí quyết là bạn không thể thay đổi trực tiếp một biến cục bộ, nhưng bạn có thể sửa đổi các thuộc tính của một đối tượng. Bạn cũng có thể sửa đổi giá trị của một biến toàn cục:

var g_n = 0;
function go()
{
    var n = 0;
    var o = { n: 0 };
    return g_n + n + o.n;  // breakpoint here
}

bảng điều khiển:

> g_n = 10
  10
> g_n
  10
> n = 10
  10
> n
  0
> o.n = 10
  10
> o.n
  10

Kiểm tra kết quả go()sau khi thiết lập điểm ngắt và chạy các lệnh gọi đó trong bảng điều khiển, và bạn sẽ thấy rằng kết quả là 20, thay vì 0 (nhưng đáng buồn thay, không phải 30).


2016/01/19 Chrome mới nhất, mã tầm thường (var a = 1; debugger; console.log (a);) vẫn còn lỗi ...
Offirmo 19/01

@Offirmo - đã 1được đăng nhập. Lỗi là gì? Bạn đã mong đợi điều gì được đăng nhập?
gilly3

với mở debugger, thay đổi giá trị của abất cứ điều gì (ví dụ: 42.) trong "phạm vi" bảng điều khiển sau đó tiếp tục: 1 là đăng nhập
Offirmo

@Offirmo - không dành cho tôi: ảnh chụp màn hình . Nhưng, nếu tôi gói nó trong một hàm, thì tôi thấy những gì bạn mô tả. Hấp dẫn. Nhưng sau đó, tôi có thể thay đổi giá trị bằng cách nhập trực tiếp vào bảng điều khiển, (cá nhân tôi thấy dễ dàng hơn so với sử dụng bảng điều khiển phạm vi). ảnh chụp màn hình Tôi đoán tôi chưa bao giờ thử thay đổi các giá trị trong bảng điều khiển phạm vi. Tôi luôn chỉ thực thi các biểu thức trong bảng điều khiển để thay đổi giá trị và điều đó dường như hoạt động không có vấn đề gì.
gilly 3

3
Tôi ủng hộ vì câu trả lời của bạn đáp ứng tất cả các tiêu chí của "một câu trả lời hay" bạn đề cập đến một câu trả lời khác cung cấp thông tin mới hơn, tốt hơn, - đến từ một câu trả lời được chấp nhận - mang lại sự tin cậy ngay lập tức. Vì vậy, cảm ơn. Và tận hưởng sự ủng hộ!
gfullam

67

Điều này hiện có thể thực hiện được trong chrome 35 (hôm nay là ngày 11 tháng 7 năm 2014). Tôi không biết phiên bản nào cho phép nó đầu tiên.

Chỉ cần thử nghiệm ví dụ @ gilly3 trên máy của tôi và nó hoạt động.

  • Mở bảng điều khiển, trong Sourcesvà tab Snippets, thêm đoạn mã mới, dán đoạn mã sau vào đó:

    var g_n = 0; function go() { var n = 0; var o = { n: 0 }; return g_n + n + o.n; // breakpoint here }

  • Nhấp chuột phải vào tên đoạn mã, nhấp vào 'Chạy' (mặc dù điều này không kích hoạt chức năng)

  • Thêm điểm ngắt vào câu lệnh trả về.
  • Trong bảng điều khiển bên dưới, nhập go()
  • và thay đổi các giá trị biến như được minh họa bên dưới

chức năng được phép sửa đổi cục bộ.

và kết quả trả về g_n + n + o.nlà 30.


1
Sự hồi quy của lỗi này được theo dõi trong liên kết được cung cấp trong câu trả lời của Brian .
Mike

7

Đây là một lỗi đã được thừa nhận trong Công cụ dành cho nhà phát triển của Chrome:

http://code.google.com/p/chromium/issues/detail?id=124206


Có vẻ như nó đã được sửa vào ngày 21 tháng 3 năm 2013. Tôi không chắc làm thế nào để biết nó sẽ có phiên bản chrome nào.
David

@David Họ đã sửa nó trong Blink, chúng tôi có thể phải đợi một thời gian để có được bản dựng Chrome sử dụng Blink
Anshul

3
Nó bị hỏng (một lần nữa) trong phiên bản Chrome 49.0.2623.87. Đăng nhập vào liên kết trên và gắn dấu sao vấn đề nếu bạn muốn nâng cao tầm quan trọng của nó.
Mike

5

Đúng! Cuối cùng! Tôi vừa dùng thử với Chrome, Phiên bản 66.0.3359.170 (Bản dựng chính thức) (64-bit) trên Mac.

Bạn có thể thay đổi các giá trị trong phạm vi như trong hình đầu tiên hoặc bằng bảng điều khiển như trong hình thứ hai.

Trình gỡ lỗi Chrome thay đổi giá trị

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


Điều đó dường như cũng hiệu quả đối với các tình huống phức tạp (như Khoảng thời gian và trình kích hoạt).
Gerfried

4

Có vẻ như không.

Đặt một điểm ngắt, khi nó dừng, hãy chuyển sang bảng điều khiển, hãy thử đặt biến. Nó không có lỗi khi bạn gán cho nó một giá trị khác, nhưng nếu bạn đọc nó sau khi gán, nó không bị sửa đổi. : - /


Được rồi ... ít nhất bạn đang thấy hành vi giống như tôi thấy. Nhưng ... Có thể không?
tato

4

Firebug dường như cho phép bạn làm điều đó.


3
Và IE và Opera Dragonfly cũng vậy.
Keith K

5
Tôi thực sự nhớ Opera Dragonfly -____-
ThorSummoner

2

Trên thực tế, có một cách giải quyết. Sao chép toàn bộ phương thức, sửa đổi tên của nó, ví dụ: originalName () thành originalName2 () nhưng sửa đổi biến bên trong để nhận bất kỳ giá trị nào bạn muốn hoặc chuyển nó vào dưới dạng tham số.

Sau đó, nếu bạn gọi phương thức này trực tiếp từ bảng điều khiển, nó sẽ có cùng chức năng nhưng bạn sẽ có thể sửa đổi các giá trị biến.

Nếu phương thức được gọi tự động thì thay vào đó hãy nhập vào bảng điều khiển

originalName = null;
function originalName(original params..)
{
    alert("modified internals");
    add whatever original code you want
}

2

Tôi có thể sửa đổi giá trị biến tập lệnh bằng cách gán trong Bảng điều khiển. Có vẻ đơn giản nhất.


1

Tôi không biết tại sao nhóm chrome không cho phép tính năng ngớ ngẩn này ... nhưng cách duy nhất tôi có thể thay đổi các giá trị biến thành công là sửa đổi tập lệnh trực tiếp trong trình chỉnh sửa chrome trong Tab "Nguồn" (điều này thay đổi hoạt động của tập lệnh của bạn cho đến khi bạn làm mới trang), nhưng những thay đổi đó sẽ mất khi làm mới, vì vậy hãy cẩn thận.


0

Tôi đang gặp sự cố tương tự, hãy truy cập 'Giới thiệu về Google Chrome' -> Trợ giúp và nó cho biết tôi cần khởi động lại trình duyệt của mình để nhận các bản cập nhật mới nhất.

Tôi đã làm điều này và đột nhiên, bây giờ tôi có thể thay đổi các biến cục bộ. Chỉ cần nhấp vào biến bạn muốn chỉnh sửa trong cửa sổ Phạm vi biến và nhập giá trị mới của bạn.

Tuy nhiên, tôi đã nhận thấy một số điều kỳ lạ, đó là tôi phải vượt qua một số nhiệm vụ var không liên quan trước khi có thể thay đổi văn bản trong cửa sổ bên phải (Biến phạm vi).


Nếu bạn đã sử dụng bộ nhớ cục bộ để lưu trữ thuộc tính, bạn cũng có thể đi tới Tài nguyên-> Lưu trữ địa phương và chỉnh sửa các thuộc tính bạn đã lưu trực tiếp ở đó.
GilesDMiddleton

0

Để sửa đổi giá trị mỗi khi một khối mã chạy mà không cần phải phá vỡ luồng thực thi :

Tính năng "Logpoints" trong trình gỡ lỗi được thiết kế để cho phép bạn ghi các giá trị tùy ý vào bảng điều khiển mà không bị hỏng. Nó đánh giá mã bên trong luồng thực thi, có nghĩa là bạn thực sự có thể sử dụng nó để thay đổi các giá trị một cách nhanh chóng mà không cần dừng lại.

Nhấp chuột phải vào số dòng và chọn "Điểm đăng nhập", sau đó nhập biểu thức gán. Nó trông giống như sau:

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

Tôi thấy nó cực kỳ hữu ích để đặt các giá trị thành một trạng thái không dễ tái tạo, mà không cần phải xây dựng lại dự án của mình với các dòng gỡ lỗi trong đó. HÃY NHỚ xóa điểm ngắt khi bạn hoàn tất!

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.