Những bí mật của công cụ dành cho nhà phát triển trong trình duyệt
(christianheilmann.com)<p>1. Trong Console có nhiều chức năng hơn cả `log()`<br />
- Tùy chọn lọc<br />
- {} : in kèm giá trị/tên biến<br />
- `warn()`/`info()`/`error()` : mức độ log<br />
- `assert()` : chỉ xuất ra khi thỏa điều kiện cụ thể<br />
- `trace()` : ai đã gọi nó <br />
- `group()` : nhóm thông điệp để có thể mở rộng/thu gọn <br />
- `table()` : xuất thông tin dưới dạng bảng <br />
- `$()` = `document.querySelector()`, `$$()` = `document.querySelectorAll()`<br />
`$$('a').map(a => {`<br />
`return {url: a.href, text: a.innerText}`<br />
`})`<br />
<br />
2. Ghi log mà không cần truy cập mã nguồn<br />
- Live Expressions : kiểm tra giá trị biến thay đổi theo thời gian thực<br />
- logpoints : một dạng breakpoint đặc biệt, sẽ in log khi dòng đó được thực thi. Về mặt kỹ thuật, có thể xem như thêm `console.log` ở bất kỳ đâu trên trang web<br />
<br />
3. Ghi log ra bên ngoài trình duyệt <br />
- VS Code Debugger<br />
<br />
4. Chèn mã vào bất kỳ trang nào (các trình duyệt Chromium: Edge, Chrome, Brave..)<br />
- Snippets : chạy script cho website hiện tại <br />
- Overrides : lưu bản sao của script từ xa, chỉnh sửa rồi ghi đè khi trang được tải <br />
<br />
5. Có thể Inspect & Debug ở nhiều nơi hơn nữa (các trình duyệt Chromium)<br />
- Tất cả dòng Electron đều được hỗ trợ : GitHub Desktop, VS Code, ngay cả Developer Tools của trình duyệt cũng có thể tự debug bằng Developer Tools<br />
- MS Edge Tools for VS Code <br />
<br />
6. Những bí mật lộn xộn hơn<br />
- Mọi người chỉ dùng một phần của công cụ dành cho nhà phát triển. Có lẽ vì tài liệu giải thích chưa đủ, nên đã bỏ rất nhiều thời gian để làm tài liệu, nhưng có vẻ đó không phải là lời giải <br />
- Công cụ dành cho nhà phát triển ngày càng phức tạp và dễ khiến người dùng bị choáng ngợp bởi quá nhiều tính năng. Liệu có cách nào để cải thiện không?<br />
→ Edge đang muốn đưa vào Focus Mode. Thay vì hiển thị mọi tính năng, chỉ hiện các công cụ cần thiết theo từng use case <br />
→ Cũng đang làm Informational Overlays. Tức là cung cấp trợ giúp có thể xem trực tiếp ngay trong công cụ dành cho nhà phát triển <br />
- Vẫn còn khoảng cách giữa việc viết mã và debug sản phẩm hoàn chỉnh <br />
→ Làm sao để những thay đổi trong công cụ dành cho nhà phát triển được phản ánh trở lại vào mã nguồn?<br />
→ Một hướng là thay thế công cụ dành cho nhà phát triển bằng VSCode, và khi dùng công cụ thì sửa trực tiếp các file trên ổ đĩa cứng<br />
→ Hướng khác là như một phần của extension VSCode, cho phép chọn để các thay đổi bằng công cụ dành cho nhà phát triển cũng có thể cập nhật vào file trên đĩa<br />
<br />
7. Chính bạn là Audience và Client của công cụ dành cho nhà phát triển <br />
→ Gửi phản hồi qua Report a Bug / Request a Feature, v.v. </p>
3 bình luận