Console.log là gì?


414

Việc sử dụng là console.loggì?

Vui lòng giải thích cách sử dụng nó trong JavaScript, với một ví dụ mã.

Câu trả lời:


454

Đây không phải là một tính năng của jQuery mà là một tính năng cho mục đích gỡ lỗi. Ví dụ, bạn có thể đăng nhập một cái gì đó vào bàn điều khiển khi có điều gì đó xảy ra. Ví dụ:

$('#someButton').click(function() {
  console.log('#someButton was clicked');
  // do something
});

Sau đó, bạn sẽ thấy #someButton was clickedtrong tab Bảng điều khiển Bảng điều khiển của Firebird (hoặc bảng điều khiển của công cụ khác - ví dụ: Trình kiểm tra web của Chrome) khi bạn nhấp vào nút.

Vì một số lý do, đối tượng console có thể không khả dụng. Sau đó, bạn có thể kiểm tra xem nó có hữu ích không - điều này rất hữu ích vì bạn không phải xóa mã gỡ lỗi khi triển khai vào sản xuất:

if (window.console && window.console.log) {
  // console is available
}

17
Các công cụ dành cho nhà phát triển của Google Chrome cũng được tích hợp bảng điều khiển.
RobertPitt

8
"Điều này rất hữu ích vì bạn không phải xóa mã gỡ lỗi khi triển khai vào sản xuất" <- Điều gì sẽ xảy ra nếu người dùng cuối mở Fireorms?
AbdullahC

6
Nó cũng hữu ích khi không để IE gây ra lỗi cho bảng điều khiển không được xác định
Alan Whitelaw

4
Imho, tốt hơn là kiểm tra mọi lúc nếu console.log có sẵn thì tốt hơn là có một cái gì đó như thế này: if (typeof (console) == 'không xác định') {console = {'log': function () {return}}} Trong trường hợp như vậy bạn có thể viết console.log mỗi khi bạn cần mà không cần kiểm tra sự hiện diện của nó!
Enrico Carlesso

12
if (console.log)(hoặc thậm chí if (console && console.log)) vẫn sẽ đưa ra lỗi nếu bảng điều khiển không khả dụng. Bạn nên sử dụng window.console(như windowđược đảm bảo tồn tại) và chỉ kiểm tra một cấp độ sâu tại một thời điểm.
Tgr

226

Những nơi bạn có thể xem giao diện điều khiển! Chỉ cần có tất cả trong một câu trả lời.

Firefox

http://getfireorms.com/

(hiện tại bạn cũng có thể sử dụng các công cụ dành cho nhà phát triển được tích hợp sẵn của Firefox Ctrl + Shift + J (Công cụ> Nhà phát triển web> Bảng điều khiển lỗi), nhưng Fireorms tốt hơn nhiều; sử dụng Fireorms)

Safari và Chrome

Về cơ bản là giống nhau.

https://developers.google.com/chrome-developer-tools/docs/overview

https://developer.apple.com/technology/safari/developer-tools.html

trình duyệt web IE

Đừng quên bạn có thể sử dụng các chế độ tương thích để gỡ lỗi IE7 và IE8 trong IE9 hoặc IE10

http://msdn.microsoft.com/en-us/l Library /ie / gg589507 (v = vs85) .aspx

http://msdn.microsoft.com/en-us/l Library / dd565628 (v = vs85) .aspx

Nếu bạn phải truy cập bảng điều khiển trong IE6 cho IE7, hãy sử dụng bookmarklet Fireorms Lite

http://getfireorms.com/fireormslite/ tìm bookmarklet ổn định

http://en.wikipedia.org/wiki/Bookmarklet

Opera

http://www.opera.com/dragonfly/

iOS

Hoạt động cho tất cả iPhone, iPod touch và iPad.

http://developer.apple.com/l Library / ios / iadad / # DOCUMENTATION / AppAppluggest / Reference / SalariWebContent / DebuggingSafarioniPhoneContent / DebuggingSafarioniPhoneContent.html

Giờ đây với iOS 6, bạn có thể xem bảng điều khiển thông qua Safari trong OS X nếu bạn cắm thiết bị của mình. Hoặc bạn có thể làm như vậy với trình giả lập, chỉ cần mở cửa sổ trình duyệt Safari và chuyển đến tab "Phát triển". Ở đó bạn sẽ tìm thấy các tùy chọn để yêu cầu trình kiểm tra Safari liên lạc với thiết bị của bạn.

Điện thoại Windows, Android

Cả hai đều không có giao diện điều khiển tích hợp và không có khả năng bookmarklet. Vì vậy, chúng tôi sử dụng http://jsconsole.com/ type: lắng nghe và nó sẽ cung cấp cho bạn thẻ script để đặt vào HTML của bạn. Từ đó trở đi, bạn có thể xem bảng điều khiển của mình bên trong trang web jsconsole.

iOS và Android

Bạn cũng có thể sử dụng http://html.adobe.com/edge/inspect/ để truy cập các công cụ kiểm tra web và bảng điều khiển trên bất kỳ thiết bị nào bằng cách sử dụng plugin trình duyệt tiện lợi của chúng.


Sự cố trình duyệt cũ hơn

Các phiên bản IE cũ hơn sẽ bị sập nếu bạn sử dụng console.log trong mã của mình và không mở các công cụ dành cho nhà phát triển cùng một lúc. May mắn thay, đó là một sửa chữa dễ dàng. Sử dụng đoạn mã dưới đây ở đầu mã của bạn:

 if(!window.console){ window.console = {log: function(){} }; } 

Cái này kiểm tra xem bàn điều khiển có mặt không, và nếu không nó sẽ đặt nó vào một đối tượng có chức năng trống được gọi log. Cách này window.console và window.console.log không bao giờ thực sựundefined.


26
Sửa lỗi cho tôi nếu sai, nhưng tôi nghĩ rằng không cần Fireorms trong Firefox để xem bảng điều khiển, chỉ cần nhấp Ctrl + Shift + J (Công cụ> Nhà phát triển web> Bảng điều khiển lỗi)
Dane411

4
@ Dane411 điều này là đúng, nhưng fireorms tốt hơn và được sử dụng phổ biến hơn.
Fresheyeball

3
@Fresheyeball Ai đó phải dọn dẹp tất cả rác, nhưng tôi nghĩ rằng một lúc nào đó sẽ bớt thú vị hơn khi thu hoạch những đại diện đó và thực sự giữ cho cộng đồng sạch sẽ.
andlrc

2
Bất cứ ai đánh giá thấp câu trả lời này, xin vui lòng bình luận. downvote mà không có ý kiến ​​là vô ích
Fresheyeball

đã có window.dump trước window.console.log. Nó tốt hơn chức năng nhật ký trống
OCTAGRAM

100

Bạn có thể xem bất kỳ tin nhắn nào được ghi vào bảng điều khiển nếu bạn sử dụng một công cụ như Fireorms để kiểm tra mã của mình. Hãy nói rằng bạn làm điều này:

console.log('Testing console');

Khi bạn truy cập vào bảng điều khiển trong Fireorms (hoặc bất kỳ công cụ nào bạn quyết định sử dụng để kiểm tra mã của mình), bạn sẽ thấy bất kỳ thông báo nào bạn đã nói với chức năng để đăng nhập. Điều này đặc biệt hữu ích khi bạn muốn xem liệu một hàm đang thực thi hay nếu một biến được truyền / gán đúng. Nó thực sự khá có giá trị để tìm ra những gì đã xảy ra với mã của bạn.


10
Đừng quên xác định trước để tránh lỗi trong IE: stackoverflow.com/a/7585409/318765
mgutt

83

Nó sẽ đăng một thông điệp tường trình lên bảng điều khiển javascript của trình duyệt, ví dụ Firebird hoặc Công cụ dành cho nhà phát triển (Chrome / Safari) và sẽ hiển thị dòng và tệp nơi nó được thực thi.

Hơn nữa, khi bạn xuất đối tượng jQuery, nó sẽ bao gồm một tham chiếu đến phần tử đó trong DOM và nhấp vào nó sẽ đi đến phần tử đó trong tab Các yếu tố / HTML.

Bạn có thể sử dụng nhiều phương pháp khác nhau, nhưng hãy cẩn thận để nó hoạt động trong Firefox, bạn phải mở Firebird, nếu không toàn bộ trang sẽ bị sập. Cho dù những gì bạn đang đăng nhập là một biến, mảng, đối tượng hoặc phần tử DOM, nó sẽ cung cấp cho bạn toàn bộ phân tích bao gồm cả nguyên mẫu cho đối tượng (luôn luôn thú vị để chọc ngoáy). Bạn cũng có thể bao gồm nhiều đối số như bạn muốn và chúng sẽ được thay thế bằng khoảng trắng.

console.log(  myvar, "Logged!");
console.info( myvar, "Logged!");
console.warn( myvar, "Logged!");
console.debug(myvar, "Logged!");
console.error(myvar, "Logged!");

Chúng hiển thị với các logo khác nhau cho mỗi lệnh.

Bạn cũng có thể sử dụng console.profile(profileName);để bắt đầu cấu hình một chức năng, tập lệnh, v.v. Sau đó kết thúc nó console.profileEnd(profileName);và nó sẽ hiển thị trong tab Hồ sơ của bạn trong Chrome (không biết với FF).

Để tham khảo đầy đủ, hãy truy cập http://getfireorms.com/logging và tôi khuyên bạn nên đọc nó. (Dấu vết, nhóm, hồ sơ, kiểm tra đối tượng).

Hi vọng điêu nay co ich!


1
Tại sao console.log("x:", x)tốt hơn console.log("x:" + x)? Có phải nó ít bị lỗi hơn vì a ,dễ đọc hơn a +?
Kevin Meredith

Theo tôi thì dễ đọc hơn một chút khi bạn xuất ra nhiều thứ khác nhau. Trong trường hợp này có lẽ nên sử dụng một cách +nghiêm ngặt, nhưng tôi muốn chứng minh rằng bạn cũng có thể sử dụng dấu phẩy trong các chức năng của bàn điều khiển. Ngoài ra, nó tránh các vấn đề nếu cả hai biến là số nguyên hoặc mảng.
Fred

5
console.log("x:", x)tốt hơn đáng kể, bởi vì khi xlà đối tượng hoặc mảng (hoặc bất cứ thứ gì trừ chuỗi), nó sẽ được hiển thị chính xác, không cần chuyển đổi thành chuỗi.
Josef Kufner

34

Không có gì để làm với jQuery và nếu bạn muốn sử dụng nó, tôi khuyên bạn nên làm

if (window.console) {
    console.log("your message")
}

Vì vậy, bạn không phá vỡ mã của bạn khi nó không có sẵn.

Theo đề xuất trong bình luận, bạn cũng có thể thực hiện điều đó ở một nơi và sau đó sử dụng console.lognhư bình thường

if (!window.console) { window.console = { log: function(){} }; }

18
Tôi có thể đề nghị thay vì làm if(!window.console){ window.console = function(){}; }ở một nơi, sau đó sử dụng console.log như bình thường.
Fresheyeball

23

console.logkhông có gì để làm với jQuery. Đó là một đối tượng / phương thức phổ biến được cung cấp bởi các trình gỡ lỗi (bao gồm trình gỡ lỗi Chrome và Fireorms) cho phép tập lệnh ghi dữ liệu (hoặc các đối tượng trong hầu hết các trường hợp) vào bảng điều khiển JavaScript.


19

console.logghi nhật ký thông tin gỡ lỗi vào bảng điều khiển trên một số trình duyệt (Firefox đã cài đặt Fireorms, Chrome, IE8, bất cứ thứ gì có cài đặt Fireorms Lite). Trên Firefox, nó là một công cụ rất mạnh, cho phép bạn kiểm tra các đối tượng hoặc kiểm tra bố cục hoặc các thuộc tính khác của các phần tử HTML. Nó không liên quan đến jQuery, nhưng có hai điều thường được thực hiện khi sử dụng nó với jQuery:

  • cài đặt tiện ích mở rộng FireQuery cho Fireorms . Điều này, trong số những lợi thế khác, làm cho việc ghi nhật ký của các đối tượng jQuery trông đẹp hơn.

  • tạo một trình bao bọc phù hợp hơn với các quy ước mã chuỗi của jQuery.

Điều này thường có nghĩa là một cái gì đó như thế này:

$.fn.log = function() {
    if (window.console && console.log) {
        console.log(this);
    }
    return this;
}

mà sau đó bạn có thể gọi như

$('foo.bar').find(':baz').log().hide();

để dễ dàng kiểm tra bên trong chuỗi jQuery.


16

console.log không có gì để làm với jQuery.

Nó ghi nhật ký một thông báo vào bảng điều khiển gỡ lỗi, chẳng hạn như Fireorms.


16

Một điểm khó hiểu đôi khi là để ghi lại một tin nhắn văn bản cùng với nội dung của một trong các đối tượng của bạn bằng console.log, bạn phải chuyển từng một trong hai đối số thành một đối số khác nhau. Điều này có nghĩa là bạn phải phân tách chúng bằng dấu phẩy vì nếu bạn sử dụng toán tử + để nối các đầu ra, thì điều này sẽ gọi .toString()phương thức của đối tượng của bạn. Điều này trong hầu hết các trường hợp không được ghi đè rõ ràng và việc triển khai mặc định được kế thừa bởi Objectkhông cung cấp bất kỳ thông tin hữu ích nào.

Ví dụ để thử trong giao diện điều khiển:

>>> var myObj = {foo: 'bar'}
undefined
>>> console.log('myObj is: ', myObj);
myObj is: Object { foo= "bar"}

trong khi đó nếu bạn cố gắng nối thông điệp văn bản thông tin cùng với nội dung của đối tượng bạn nhận được:

>>> console.log('myObj is: ' + myObj);
myObj is: [object Object]

Vì vậy, hãy nhớ rằng console.log trong thực tế có nhiều đối số như bạn muốn.


13

Sử dụng console.log để thêm thông tin gỡ lỗi vào trang của bạn.

Nhiều người sử dụng alert(hasNinjas)cho mục đích này nhưngconsole.log(hasNinjas) dễ làm việc hơn. Sử dụng một cảnh báo bật lên một hộp thoại phương thức chặn giao diện người dùng.

Chỉnh sửa: Tôi đồng ý với Baptiste PernetJan Hančič rằng nên kiểm tra xem có window.consoleđược xác định trước để mã của bạn không bị hỏng nếu không có bảng điều khiển khả dụng.


12

Một ví dụ - giả sử bạn muốn biết dòng mã nào bạn có thể chạy chương trình của mình (trước khi nó bị hỏng!), Chỉ cần nhập vào

console.log("You made it to line 26. But then something went very, very wrong.")

11

Bạn sử dụng nó để gỡ lỗi mã JavaScript bằng Firebird cho Firefox hoặc bảng điều khiển JavaScript trong trình duyệt WebKit .

var variable;

console.log(variable);

Nó sẽ hiển thị nội dung của biến, ngay cả khi đó là một mảng hoặc đối tượng.

Nó tương tự như print_r($var);với PHP .


3
Một mẹo hữu ích ... Tôi luôn bao gồm các mục sau trong tệp javascript có thể truy cập toàn cầu : if (!window.console) { window.console = { log : function() {} }; }. Điều này cho phép bạn thoát khỏi việc quên xóa câu lệnh gỡ lỗi không thường xuyên.
roufamatic

@roufamatic Tôi không biết ... thêm mã, để xử lý mã không thuộc về, có vẻ như là một giải pháp khá khủng khiếp ... đặc biệt là khi tìm / thay thế quá dễ dàng ...
jondavidjohn

10

Chú ý: để lại các cuộc gọi đến bàn điều khiển trong mã sản xuất của bạn sẽ khiến trang web của bạn bị hỏng trong Internet Explorer. Không bao giờ giữ nó mở khóa. Xem: https://web.archive.org/web/20150908041020/blog.patspam.com/2009/the-curse-of-consolelog


2
Không phải nhật ký giao diện điều khiển sẽ bị hỏng nếu bạn đang sử dụng máy Windows, nhưng nó sẽ phá vỡ trang web của bạn nếu bạn đang sử dụng Internet Explorer.
Kris Hollenbeck

Tôi nghĩ rằng blog được tham chiếu trong câu trả lời không còn tồn tại.
Tsundoku

Liên kết ban đầu đã chết. Tôi đã tìm thấy một bản sao Lưu trữ web.
Alex

8

Trong những ngày đầu, việc gỡ lỗi JS được thực hiện thông qua alert()chức năng - bây giờ nó là một thực tiễn lỗi thời.

Đây console.log()là một chức năng viết một thông báo để đăng nhập vào bảng điều khiển gỡ lỗi, chẳng hạn như Webkit hoặc Fireorms. Trong trình duyệt, bạn sẽ không thấy bất cứ điều gì trên màn hình. Nó ghi lại một thông điệp đến một bàn điều khiển gỡ lỗi. Nó chỉ khả dụng trong Firefox với Fireorms và trong các trình duyệt dựa trên Webkit (Chrome và Safari). Nó không hoạt động tốt trong tất cả các bản phát hành IE .

Đối tượng giao diện điều khiển là một phần mở rộng cho DOM.

Chỉ console.log()nên được sử dụng trong mã trong quá trình phát triển và gỡ lỗi.

Nó được coi là thực hành xấu mà ai đó để lại console.log()trong tệp javascript trên máy chủ sản xuất.


5

Nếu trình duyệt của bạn hỗ trợ gỡ lỗi, bạn có thể sử dụng phương thức console.log () để hiển thị các giá trị JavaScript.

Kích hoạt gỡ lỗi trong trình duyệt của bạn F12và chọn "Bảng điều khiển" trong menu trình gỡ lỗi.

Bảng điều khiển trong JavaScript. Cố gắng sửa hoặc "gỡ lỗi", một chương trình JavaScript không hoạt động và thực hành sử dụng lệnh console.log (). Có các phím tắt sẽ giúp bạn truy cập vào bảng điều khiển JavaScript, dựa trên trình duyệt mà bạn đang sử dụng:

Phím tắt trên Bàn điều khiển Chrome

Windows: Ctrl+ Shift+ J
Mac: Cmd+ Option+J

Phím tắt bàn điều khiển Firefox

Windows: Ctrl+ Shift+ K
Mac: Cmd+ Option+K

Phím tắt bàn điều khiển Internet Explorer

F12 Chìa khóa

Phím tắt Safari Console

Cmd+ Option+C


4

console.logcụ thể là một phương pháp để các nhà phát triển viết mã để thông báo một cách rõ ràng cho các nhà phát triển những gì mã đang làm. Nó có thể được sử dụng để cảnh báo bạn rằng có một vấn đề, nhưng không nên thay thế trình gỡ lỗi tương tác khi đến lúc gỡ lỗi mã. Bản chất không đồng bộ của nó có nghĩa là các giá trị được ghi lại lại không nhất thiết phải đại diện cho giá trị khi phương thức được gọi.

Tóm lại: đăng nhập lỗi với console.log(nếu có), sau đó sửa lỗi bằng cách sử dụng trình gỡ lỗi mà bạn chọn: Fireorms , WebKit Developer Tools (tích hợp vào SafariChrome ), IE Developer Tools hoặc Visual Studio.


4

Tôi thực sự cảm thấy lập trình web dễ dàng khi tôi bắt đầu console.loggỡ lỗi.

var i;

Nếu tôi muốn kiểm tra giá trị của ithời gian chạy ..

console.log(i);

bạn có thể kiểm tra giá trị hiện tại của itab bảng điều khiển của fireorms. Nó được sử dụng đặc biệt để gỡ lỗi.


4

Nó được sử dụng để ghi nhật ký (bất cứ thứ gì bạn vượt qua) vào bảng điều khiển Fireorms . Việc sử dụng chính sẽ là gỡ lỗi mã JavaScript của bạn.


4

Ngoài các công dụng được đề cập ở trên, console.logcũng có thể in ra thiết bị đầu cuối trong node.js. Một máy chủ được tạo bằng express (ví dụ.) Có thể sử dụng console.logđể ghi vào tệp logger đầu ra.


2

Trong các tập lệnh java không có chức năng đầu vào và đầu ra. Vì vậy, để gỡ lỗi phương thức console.log () được sử dụng. Đây là một phương thức để đăng nhập. Nó sẽ được in dưới nhật ký giao diện điều khiển (công cụ phát triển).

Nó không có trong IE8 và dưới cho đến khi bạn mở công cụ phát triển IE.


2

Điều này không có gì để đối phó với jQuery. Các console.log()là tham khảo để chức năng đăng nhập giao diện điều khiển của đối tượng, trong đó cung cấp phương pháp để đăng nhập thông tin cho giao diện điều khiển của trình duyệt. Các phương pháp này chỉ nhằm mục đích gỡ lỗi và không nên dựa vào để trình bày thông tin cho người dùng cuối.

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.