Hiện nay, Javascript đang trở thành một ngôn ngữ lập trình rất rất phổ biến. Nếu bạn là một javascript developer thì xin chúc mừng. Vì bạn có thể dễ dàng chuyển sang rất nhiều mảng từ lập trình Front-end, lập trình Back-end(nodejs) cho đến lập trình Android ( react native).
Là một web developer, chắc hẳn bạn không còn quá xa lạ với console trên trình duyệt đúng không? (mình hay quen gọi là "con sâu"). Trước đây thì mình hay sử dụng các thư viện bên ngoài cho để hiển thị log, định dạng cho đẹp khi cần debug. Nhưng dần dần mình khám phá ra màn hình console của các trình duyệt mạnh mẽ hơn nhiều so với những gì mình nghĩ.
Khi chúng ta nghĩ đến việc hiển thị thông tin gì đó để debug, điều đầu tiên xuất hiện trong đầu là console.log phải không? Nhưng thật sự có nhiều phương thức hơn những gì chúng ta nghĩ.
Màn hình console là một tính năng tích hợp sẵn trong các trình duyệt hiện đại. Nó cho phép nhà phát triển có thể:
Về cơ bản, nó cho phép bạn viết, quản lý và quan sát luồng logic của code javaScript ngay trên trình duyệt của bạn.
Bây giờ chúng ta cùng nhau khám phá xem sức mạnh "tiềm ẩn" của màn hình console có gì nhé!
Có lẽ đây là các phương thức được sử dụng phổ biến nhất. Bạn có thể truyền nhiều tham số cho các phương thức này. Mỗi tham số được đánh giá và ghép nối thành một chuỗi được phân chia bởi dấu cách. Trường hợp các tham số là object hay mảng, bạn cũng có thể điều chỉnh hiển thị giữa các thuộc tính với nhau.
Bạn có thể xem hình ảnh bên dưới để rõ hơn
Phương thức này cho phép bạn nhóm các console.log ( bao gồm cả các thông tin lỗi ) thành một grou, nhờ đó mà khi debug trên trình duyệt, bạn sẽ dễ theo dõi hơn.
Cú pháp rất đơn giản: chỉ cần nhập tất cả console.log mà chúng ta muốn gom trước một console.group () (hoặc console.groupCollapsed () nếu chúng ta muốn nó đóng theo mặc định). Sau đó, thêm console.groupEnd () ở cuối để đóng nhóm.
Kết quả sẽ trông như thế này:
Kể từ khi mình phát hiện ra console.table quá trình làm việc của mình đã thay đổi. Hiển thị JSON hoặc các mảng JSON rất lớn bên trong console.log là một trải nghiệm đáng sợ. Console.table cho phép chúng ta hình dung các cấu trúc này bên trong một bảng, nơi chúng ta có thể đặt tên cho các cột và truyền chúng như các tham số.
Kết quả thật tuyệt vời và rất hữu ích trong việc gỡ lỗi:
Ba phương thức này giống như con dao đa năng của Thụy Sĩ vậy. Nó cho phép nhà phát triển trở nên nhàn hạ hơn khi debug lỗi.
Phương thức Console.count() đếm và xuất ra số số lần mà hàm count() được gọi trên cùng một dòng và với cùng một label.
Hàm console.time() bắt đầu đặt thời gian với tên chỉ định được xem là tham số đầu vào và có thể chạy đồng thời tối đa 10.000 giờ trên một trang nhất định. Để stop đếm thời gian, chúng ta sử dụng lệnh gọi đến hàm console.timeEnd()
Đầu ra sẽ trông như thế này:
Các phương thức này đơn gian là in ra stack trace từ nơi mà nó được gọi.
Hãy tưởng tượng rằng bạn đang tạo ra một thư viện JS và muốn thông báo cho người dùng biết lỗi đã xảy ra ở đâu. Trong trường hợp đó, những phương thức này có thể rất hữu ích. Console.assert như console.trace nhưng sẽ chỉ in nếu như điều kiện truyền vào không pass.
Như chúng ta có thể thấy, đầu ra chính xác là những gì mà React (hoặc bất kỳ thư viện nào khác) sẽ hiển thị cho chúng ta khi chúng ta tạo ra một exception
Việc sử dụng các màn hình console thường buộc chúng ta phải xóa chúng. Hoặc đôi khi chúng ta quên việc tạo nên chúng ở đâu trong source code(và chỉ bất chợt nhìn thấy khi hệ thống website bị lỗi).
Tất nhiên, mình không khuyên bạn lạm dụng màn hình console. Bạn chỉ nên in log trong chế độ phát triển để chúng có thể giúp bạn debug lỗi, còn chế độ deploy thật thì tắt đi. Mình sử dụng Webpack rất nhiều, cả ở dự án của công ty và trong các dự án của riêng mình. Công cụ này cho phép bạn xóa tất cả các console mà bạn không muốn giữ bằng cách sử dụng uglifyjs-webpack-plugin
const UglifyJsPlugin = require('uglifyjs-webpack-plugin') var debug = process.env.NODE_ENV !== "production";
..... optimization: { minimizer: !debug ? [ new UglifyJsPlugin({ // Compression specific options uglifyOptions: { // Eliminate comments comments: false, compress: { // remove warnings warnings: false, // Drop console statements drop_console: true }, } })] : [] }
Cách cấu hình cũng đơn giản phải không?
VNTALKING là một cộng đồng những lập trình viên giàu kinh nghiệm mong muốn chia sẻ những kiến thức, kinh nghiệm quý giá trong quá trình làm việc nhằm giúp các bạn học sinh, sinh viên nhanh chóng tiếp cận công nghệ mới. Hiện tại, VNTALKING đang có nhiều bài viết về Javascript và học React Native Nguồn bài viết:
Nếu bạn muốn gửi guest post, liên hệ với mình qua email: [email protected] nhé
Bài viết liên quan
Đầu tư crypto có phải một nghề không? - 3 min(s) read - published on March 22, 2021[Case Study] - StatcWeb.Studio dùng nocode để làm tool nocode: 200h - 0 sales - 5 min(s) read - published on January 24, 2021[Case Study] Bán No-code MVP làm trong 100h giá $5000 - 11 min(s) read - published on January 15, 2021Chi tiết mình validate idea với nocode - 3 tuần 60 sales - $567 - 7 min(s) read - published on December 15, 2020Do things that don't scale - Lời khuyên tốt nhất để validate idea làm app - 2 min(s) read - published on November 22, 2020GPT-3 sẽ là phát minh quan trọng kể từ Blockchain - 4 min(s) read - published on September 15, 2020#6 - NoCode MVP - Tổng kết - 5 min(s) read - published on August 22, 2020#5 - NoCode MVP - Buông bỏ để hạnh phúc - 2 min(s) read - published on July 28, 2020#4 - NoCode MVP - Ý tưởng. Một lần chơi lớn - 4 min(s) read - published on July 2, 2020#3 - NoCode MVP - Sức mạnh của Bubble.io - 5 min(s) read - published on June 29, 2020