Ghi thông báo vào bảng điều khiển là một cách rất cơ bản để chẩn đoán và khắc phục sự cố nhỏ trong mã của bạn
Nhưng, bạn có biết rằng có nhiều điều về
let x = 1
console.log["x:", x]
8 hơn là chỉ let x = 1
console.log["x:", x]
9 không? Bảng điều khiển soạn thảo nhiều dòng của Firefox
Nếu chưa từng sử dụng chế độ soạn thảo nhiều dòng trên Firefox, bạn nên thử ngay
Chỉ cần mở bảng điều khiển,
let x = 1
let y = 2
let z = 3
1 hoặc let x = 1
let y = 2
let z = 3
2 và ở trên cùng bên phải, bạn sẽ thấy nút có nội dung "Chuyển sang chế độ trình chỉnh sửa nhiều dòng". Ngoài ra, bạn có thể nhấn let x = 1
let y = 2
let z = 3
3Điều này cung cấp cho bạn trình chỉnh sửa mã nhiều dòng ngay bên trong Firefox
bảng điều khiển. đăng nhập
Hãy bắt đầu với một ví dụ nhật ký rất cơ bản
let x = 1
console.log[x]
Nhập nó vào bảng điều khiển Firefox và chạy mã. Bạn có thể nhấp vào nút "Chạy" hoặc nhấn
let x = 1
let y = 2
let z = 3
4Trong ví dụ này, chúng ta sẽ thấy "1" trong bảng điều khiển. Khá đơn giản, phải không?
Nhiều giá trị
Bạn có biết rằng bạn có thể bao gồm nhiều giá trị?
let x = 1
console.log["x:", x]
Nhưng nếu chúng ta có nhiều giá trị muốn ghi lại thì sao?
let x = 1
let y = 2
let z = 3
Thay vì gõ
let x = 1
let y = 2
let z = 3
5 ba lần, chúng ta có thể bao gồm tất cả. Và chúng ta cũng có thể thêm một chuỗi trước mỗi chuỗi nếu muốnlet x = 1
console.log["x:", x]
1Nhưng đó là quá nhiều công việc. Chỉ cần bọc chúng bằng dấu ngoặc nhọn. Bây giờ bạn có một đối tượng với các giá trị được đặt tên
let x = 1
console.log["x:", x]
2Bạn có thể làm điều tương tự với một đối tượng
let x = 1
console.log["x:", x]
3Nhật ký đầu tiên sẽ in các thuộc tính trong đối tượng người dùng. Cái thứ hai sẽ xác định đối tượng là "người dùng" và in các thuộc tính bên trong nó
Nếu bạn đang ghi nhiều thứ vào bảng điều khiển, điều này có thể giúp bạn xác định từng nhật ký
Các biến trong nhật ký
Bạn có biết rằng bạn có thể sử dụng các phần nhật ký của mình làm biến không?
let x = 1
console.log["x:", x]
4Trong ví dụ này,
let x = 1
let y = 2
let z = 3
6 đề cập đến một tùy chọn chuỗi được bao gồm sau giá trị ban đầu. Điều này sẽ đề cập đến "John"let x = 1
let y = 2
let z = 3
7 đề cập đến một tùy chọn chữ số được bao gồm sau giá trị ban đầu. Điều này sẽ đề cập đến 29Đầu ra của tuyên bố này sẽ là. "John 29 tuổi. "
Các biến thể của nhật ký
Có một vài biến thể của nhật ký. Có
let x = 1
let y = 2
let z = 3
5 được sử dụng rộng rãi nhất. Nhưng cũng cólet x = 1
console.log["x:", x]
8Các biến thể này thêm kiểu dáng vào nhật ký của chúng tôi trong bảng điều khiển. Chẳng hạn,
let x = 1
let y = 2
let z = 3
9 sẽ có màu vàng và let x = 1
console.log["x:", x]
10 sẽ có màu đỏGhi chú. Các phong cách khác nhau từ trình duyệt để trình duyệt
Nhật ký tùy chọn
Chúng tôi có thể in tin nhắn ra bàn điều khiển một cách có điều kiện với
let x = 1
console.log["x:", x]
11let x = 1
console.log["x:", x]
2Nếu đối số đầu tiên là sai, thì thông báo sẽ được ghi lại
Nếu chúng ta thay đổi
let x = 1
console.log["x:", x]
12 thành let x = 1
console.log["x:", x]
13 thì tin nhắn sẽ không được ghi lạiĐếm
Bạn có biết rằng bạn có thể đếm bằng bảng điều khiển không?
let x = 1
console.log["x:", x]
5Mỗi lần lặp của vòng lặp này sẽ in một số đếm ra bàn điều khiển. Bạn sẽ thấy "mặc định. 1, mặc định. 2", và cứ tiếp tục như vậy cho đến khi đạt 10
Nếu bạn chạy lại cùng vòng lặp này, bạn sẽ thấy số đếm tiếp tục ở nơi nó dừng lại;
Để đặt lại bộ đếm, chúng ta có thể sử dụng
let x = 1
console.log["x:", x]
14Và, nếu bạn muốn đặt tên bộ đếm khác với tên "mặc định", bạn có thể
let x = 1
console.log["x:", x]
0Bây giờ chúng tôi đã thêm nhãn, bạn sẽ thấy "Quầy 1, Quầy 2", v.v.
Và để đặt lại bộ đếm này, chúng ta phải chuyển tên vào
let x = 1
console.log["x:", x]
15. Bằng cách này, bạn có thể có nhiều bộ đếm chạy cùng lúc và chỉ đặt lại những bộ đếm cụ thểtheo dõi thời gian
Bên cạnh việc đếm, bạn cũng có thể tính thời gian như đồng hồ bấm giờ
Để bắt đầu hẹn giờ, chúng ta có thể sử dụng
let x = 1
console.log["x:", x]
16. Điều này sẽ không làm bất cứ điều gì một mình. Vì vậy, trong ví dụ này, chúng tôi sẽ sử dụng let x = 1
console.log["x:", x]
17 để mô phỏng mã đang chạy. Sau đó, trong thời gian chờ, chúng tôi sẽ dừng bộ đếm thời gian của mình bằng cách sử dụng let x = 1
console.log["x:", x]
18let x = 1
console.log["x:", x]
1Như bạn mong đợi, sau 5 giây, chúng ta sẽ có nhật ký kết thúc hẹn giờ là 5 giây
Chúng tôi cũng có thể ghi lại thời gian hiện tại của bộ hẹn giờ trong khi nó đang chạy mà không cần dừng nó. Chúng tôi làm điều này bằng cách sử dụng
let x = 1
console.log["x:", x]
19let x = 1
console.log["x:", x]
2Trong ví dụ này, chúng tôi sẽ nhận được
let x = 1
console.log["x:", x]
20 2 giây đầu tiên, sau đó là let x = 1
console.log["x:", x]
21 5 giây của chúng tôiCũng giống như bộ đếm, chúng ta có thể gắn nhãn bộ hẹn giờ và chạy nhiều bộ đếm cùng một lúc
Các nhóm
Một điều khác mà bạn có thể làm với
let x = 1
console.log["x:", x]
9 là nhóm chúng lại. ?Chúng tôi bắt đầu một nhóm bằng cách sử dụng
let x = 1
console.log["x:", x]
23. Và chúng tôi kết thúc một nhóm với let x = 1
console.log["x:", x]
24let x = 1
console.log["x:", x]
3Nhóm nhật ký này sẽ có thể thu gọn. Điều này giúp dễ dàng xác định các bộ nhật ký
Theo mặc định, nhóm không bị thu gọn. Bạn có thể đặt nó ở chế độ thu gọn bằng cách sử dụng
let x = 1
console.log["x:", x]
25 thay cho let x = 1
console.log["x:", x]
23Nhãn cũng có thể được chuyển vào
let x = 1
console.log["x:", x]
27 để xác định chúng tốt hơndấu vết ngăn xếp
Bạn cũng có thể thực hiện theo dõi ngăn xếp với
let x = 1
console.log["x:", x]
8. Chỉ cần thêm nó vào một chức nănglet x = 1
console.log["x:", x]
4Trong ví dụ này, chúng ta có các hàm rất đơn giản chỉ cần gọi nhau. Sau đó, trong chức năng cuối cùng, chúng tôi gọi
let x = 1
console.log["x:", x]
29Những cái bàn
Đây là một trong những cách sử dụng tuyệt vời nhất cho bảng điều khiển.
let x = 1
console.log["x:", x]
30Vì vậy, hãy thiết lập một số dữ liệu để đăng nhập
let x = 1
console.log["x:", x]
5Bây giờ chúng tôi sẽ ghi lại dữ liệu này bằng cách sử dụng
let x = 1
console.log["x:", x]
31Nhưng chờ đợi, nó sẽ tốt hơn
Nếu chúng ta chỉ muốn các thương hiệu, chỉ cần
let x = 1
console.log["x:", x]
32Làm thế nào về một ví dụ phức tạp hơn?
let x = 1
console.log["x:", x]
6Ở đây chúng tôi chỉ in "tên" và "email". Nếu bạn
let x = 1
console.log["x:", x]
33 tất cả dữ liệu, bạn sẽ thấy rằng có nhiều thuộc tính hơn cho mỗi người dùngPhong cách ?
Bạn có biết rằng bạn có thể sử dụng các thuộc tính CSS để tạo kiểu cho nhật ký của mình không?
Để làm điều này, chúng tôi sử dụng
let x = 1
console.log["x:", x]
34 để chỉ định rằng chúng tôi có các kiểu để thêm. Các kiểu được chuyển vào đối số thứ hai của let x = 1
console.log["x:", x]
9let x = 1
console.log["x:", x]
7Bạn có thể sử dụng điều này để làm cho nhật ký của bạn nổi bật
Xa lạ
Nếu bạn đang cố khắc phục sự cố bằng cách sử dụng nhật ký, bạn có thể làm mới rất nhiều và bảng điều khiển của bạn có thể bị lộn xộn
Chỉ cần thêm
let x = 1
console.log["x:", x]
36 vào đầu mã của bạn và bạn sẽ có một bảng điều khiển mới mỗi khi bạn làm mới. ?Chỉ cần không thêm nó vào dưới cùng của mã của bạn, lol
Cảm ơn vì đã đọc
Nếu bạn muốn xem lại các khái niệm trong bài viết này qua video, bạn có thể xem phiên bản video này tôi đã thực hiện tại đây
YouTube. Có nhiều thứ để điều khiển hơn là nhật kýTôi là Jesse đến từ Texas. Hãy xem nội dung khác của tôi và cho tôi biết cách tôi có thể giúp bạn trên hành trình trở thành nhà phát triển web.
- Đăng ký YouTube của tôi
- nói xin chào. Instagram. Twitter
- Hãy đăng ký để nhận thư mới từ tôi
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
Tutorials for all things ?? Let me help you on your journey to becoming a web developer. Support me by subscribing to my YouTube channel ▶️ and newsletter ? codeSTACKr.com
Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn
Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu