Chào các bạn, hôm nay mình sẽ gi ới thiệu với các bạn 3 tiện ích không xa lạ gì với giới lập trình viên front end. Có thể phần nhiều trong các bạn đã biết rồi, tuy nhiên mình cũng xin tổng hợp ở đây để tất cả cùng thảo luận. 1. Firebug/ Inspect Firebug đã và đang là một trong những công cụ phổ biến nhất hiện nay cho các lập trình viên front-end. Là một plugin cài thêm cho Firefox, Firebug mang nhiều ưu điểm nổi trội hơn so với dragonfly của Opera và công cụ Inspect mặc định của Chrome. Tuy nhiên chức năng của cả 2 là giống nhau. Download Đối với lập trình JS, 2 công cụ trên cung cấp một loạt các tabs khác nhau, trong đó lập trình viên js quan tâm nhất đó là tab script và tab console. Đối với tab console, ta có thể theo dõi script của mình, các lỗi và exception chưa được bắt sẽ bung hết lên đây. Cùng với một ô nhập dòng lệnh, ta có thể in ra ngay các biến đang có trong hệ thống, các hàm mà ta đã khai báo .. và tất nhiên là có thể chạy thử các hàm hoặc các mệnh đề ngay trên đây.Đối với tab "Script" (mặc định firefox sẽ disable, bạn cần enable bằng tay), tab này cho phép bạn dừng script đang chạy ngay tại một câu lệnh lỗi hoặc một exception chưa bắt. Qủa là một trợ thủ đắt lực.2. Console.log Một khi bạn đã quen với firebug hoặc inspector của chrome thì bộ các câu lệnh console sẽ cho phép bạn theo dõi tốt script của mình. Đã đến lúc chia tay với lệnh alert.console.log (hoặc .info .warn .error và .clear) giúp các bạn in bất kỳ cái gì đang có trong namespace window của bạn ra giao diện console. Nếu muốn bạn có thể thử Mã: console.log(window); console.log(1);console.log('i learn console'); Thêm nữa, bạn không cần nhiều câu console để in nhiều gía trị, console.log cho phép bạn truyền vào nhiều hơn 1 parameter. Thử: Mã: console.log('this','is','s',0,'cool', function(){}); Như vậy, trong một function phức tạp đã tạo, bạn có thể theo dõi các biến mình có, gía trị các biến trong từng thời điểm một cách dễ dàng.3. Debugger Lại là một công cụ khác để debug code, lần này debugger sẽ tạo 1 break point trong code của các bạn, khi bạn đang chạy Firebug với tab Script đã enable, script của bạn sẽ tạm dừng thực thi ngay tại nơi bạn đặt debugger, và bạn có thể tha hồ dùng chuột trỏ vào các biến để xem xét gía trị của chung, cũng như sử dụng công cụ watch trong tab script hoặc sử dụng console để thử thay đổi gía trị các biến.Cú pháp sử dụng debugger rất đơn giản: Mã: debugger; Chúc các bạn thành công
