Khi làm web đôi khi bạn gặp vấn đề là không biết đối tượng cần chỉnh sửa (text, hình ảnh, logo…) thuộc module nào của trang web. Hay khi bạn tham khảo một website và muốn biết những đoạn mã bên dưới một đối tượng để bạn có thể làm một điều tương tự. Công cụ web developer trong Firefox giúp bạn giải quyết những vấn đề này.
Tổng quan
Trong hướng dẫn này, bạn sẽ học cách dùng các công cụ web developer được tích hợp trong Firefox.
Những gì bạn sẽ học
- Truy cập các công cụ dành cho nhà phát triển
- Sử dụng công cụ inspector và console
- Giới thiệu những công cụ khác
Những gì bạn cần, rất đơn giản
- Máy tính chạy bất cứ hệ điều hành nào cũng được.
- Trình duyệt web Firefox hay bất cứ trình duyệt nào cũng được.
Làm hỏng mọi thứ thì dễ… nhưng sửa chúng lại cũng không khó như bạn nghĩ. Khi sử dụng các công cụ dành cho nhà phát triển, bạn có thể vô tình làm cho một trang web không thể sử dụng được trong trình duyệt của mình. Đừng lo lắng nếu bạn làm hỏng thứ gì đó vì nó sẽ chỉ ảnh hưởng đến bản sao của trang trong bộ nhớ máy cục bộ của bạn. Chỉ cần làm mới trình duyệt bằng cách nhấn F5 để tải lại trang ở trạng thái ban đầu.
Truy cập các công cụ dành cho nhà phát triển
Không riêng gì Firefox, hầu hết mọi trình duyệt (Chrome, Safari, Edge, IE, Opera…) đều tính hợp web developer bên trong. Các công cụ này sẽ giúp bạn khám phá bên dưới một trang web đang chạy có những gì.
Bạn mở một trang web bất kỳ. Như trang bạn đang xem chẳng hạn: thuthuattinhoc.info
Vào góc phải gần phía trên cùng của Firefox bên dưới nút đóng trình duyệt có một biểu tượng 3 dấu gạch ngang. Click vào đó và truy cập Web Developer như hình dưới. Hoặc dùng phím tắt Ctrl+Shift+I
Bạn sẽ có một cửa sổ mới trong như bên dưới.
Khi bạn rê chuột qua các đoạn mã bạn sẽ thấy các đối tượng tương ứng thay đổi ở cửa sổ bên trên. Bằng cách này bạn biết được đối tượng nào được điều khiển bởi đoạn mã nào rồi từ đó có thể chỉnh sửa lập trình lại. Bạn cũng có được thông tin về vị trí, kích thước đối tượng.
Sử dụng công cụ inspector và Console
Inspector
Web developer cho phép bạn khám phá từng đối tượng đang hiển thị trên trang web. Như đã nói ở trên, khi bạn rê chuột qua các đoạn mã thì đối tượng trên trang web sẽ thay đổi tương ứng. Bạn biết được đối tượng đó được đoạn mã nào điều khiển. Khi bạn thay đổi một vài thông số trong đoạn mã thì đối tượng cũng thay đổi theo.
Mình lấy ví dụ, mình sẽ thay đổi chữ Windows -> Cửa sổ như minh họa bên dưới.
Bạn nhấp chuột phải vào một đoạn mã mà muốn thay đổi, sau đó chọn Edit As HTML -> Thay đổi thuộc tính. Cuối cùng click chuột trái ra ngoài khung chỉnh sửa để xem sự thay đổi.
Hay bạn có thể chỉnh sửa khoảng cách giữa các mục trên menu gần nhau hơn.
Ngoài ra còn rất nhiều thứ để bạn khám phá. Bạn có thể biến giao diện trang web của mình thành một trang web hoàn toàn mới bằng cách này.
Console
Có 3 công nghệ chính trong một trang web hiện đại: HTML, CSS và JavaScript. Trong khi Inspector cho phép bạn thao tác với HTML và CSS thì Console sẽ tương tác với JavaScript.
Bạn chuyển sang tab Console. Nếu có bất kỳ thông tin hiển thị trước đó, bạn có thể xóa nó bằng cách click vào biểu tượng thùng rác như hình.
Hãy thử một phép tính đơn giản rồi enter xem thế nào nhé.
Phức tạp hơn một chút.
Bạn có thể sử dụng phím lên (up) và xuống (down) để xem lại những dòng lệnh đã nhập vào trước đó.
Bây giờ bạn có thể viết thử một hàm và xem nó có thực thi hay không? Bạn có thể viết từng dòng lệnh trên từng hàng bằng cách nhấn Shift+Enter, cửa sổ Console cũng tự nhận biết code nếu bạn chưa đóng đoạn code đang viết.
Sau khi viết xong hàm, bạn enter thì Console sẽ thông báo undefined. Tuy nhiên, đừng lo lắng đây chỉ là giá trị mặc định mà JavaScript dùng để thông báo khi giá trị trả về không được dùng ở đâu khác.
Từ Console đến Inspector và ngược lại
Console cũng tích hợp với những công cụ phát triển khác. Điều này đặc biệt hữu ích khi bạn làm việc với Inspector. Bất cứ đối tượng nào bạn chọn trong Inspector cũng tự động được gán giá trị đặc biệt $0. Ví dụ, bạn chọn text Windows như trong ví dụ bên trên bên Inspector. Khi đó giá trị của $0 sẽ như hình dưới.
Click vào biểu tượng tam giác nhỏ bên trái của kết quả. Bạn sẽ thấy toàn bộ thuộc tính JavaScript gắn với đối tượng này. Bằng cách này bạn sẽ hiểu được sâu hơn về đối tượng. Những thuộc tính JavaScript và các hàm chạy trên đối tượng.
Click vào biểu tượng chữ nhật bên phải kết quả, bạn sẽ chuyển qua cửa sổ Inspector với đối tượng đang chọn.
Xuất log ra Console
Trình duyệt web còn cung cấp một số hàm liên quan đến Console. Một trong những cách thông dụng là console.log() được dùng để ghi log ra console khi bạn viết code JavaScrip. Điều này giúp bạn debug chương trình ngay trên trình duyệt một cách dễ dàng.
Những công cụ khác
Với những người mới bắt đầu, Inspector và console là hai công cụ hữu ích. Nếu bạn là người dùng nâng cao, những công cụ khác cũng khá hữu ích. Bên dưới là một vài mô tả cho những công cụ cho web developer còn lại trong Firefox.
Debugger
Đây là công cụ dùng để debug những đoạn mã JavaScript chay trên trang web. Nó cho phép bạn thiết lập breakpoints để bạn tạm dừng sự thực thi và xem trạng thái của các variable tại những thời điểm nhất định. Một khi code dừng thực thi, bạn có thể bước vào bên trong từng dòng lệnh để xem điều gì đang diễn ra khi trang web chạy.
Style editor
Công cụ này cho phép bạn xem và chỉnh sửa stylesheets trên trang web. Bạn nênc dùng Inspector khi làm việc với CSS, công cụ này chỉ hữu ích khi bạn chỉ muốn xem CSS trên trang web.
Performance
Nếu một thứ gì đó đang làm chậm trang web của bạn? Công cụ này sẽ giúp bạn ghi lại thời gian mà trình duyệt xử lí các thành phần trên trang web.
Memory
Công cụ này cho phép bạn chụp lại vùng nhớ lưu trữ trang web hiện tại trong RAM. Bạn sẽ khám phá ra cách trình duyệt lưu trữ, phân bổ từng thành phần trong RAM như thế nào, rất thú vị phải không?
Network
Công cụ này rất hữu ích, nó cho phép bạn biết được những tập tin nào đang được dùng trong khi hiển thị trang web. Rất nhiều định dạng được liệt kê từ HTML, CSS, JavaScrip, Fonts, hình ảnh… Kiểm tra mã 404 bên cộ Status để biết file đó không tồn tại và không thể load về được.
Storage
Bạn có bao giờ nghi ngờ về những cookies? Có rất nhiều cách để một trang web có thể lưu dữ liệu của bạn trên trình duyệt bạn đang dùng. Công cụ này cho phép bạn khám phá dữ liệu mà trang web đang lưu trữ. Tuy nhiên, bạn nên cẩn thận khi xóa dữ liệu ở đây vì đôi khi nó làm trang web không hoạt động bình thường ngay cả khi ấn F5.
Nhiều công cụ khác
Nếu những công cụ bên trên vẫn chưa đủ trí tò mò của bạn, bạn vẫn muốn khám phá sâu hơn một trang web. Bằng cách truy cập như hình dưới hay nhấn F1.
