Cách chúng tôi xây dựng thẻ Vấn đề trong Công cụ của Chrome cho nhà phát triển

Jan Scheffler
Jan Scheffler
Sigurd Schneider
Sigurd Schneider
X

Trong quý cuối cùng của năm 2019, nhóm Công cụ cho nhà phát triển của Chrome đã bắt đầu cải thiện trải nghiệm của nhà phát triển trong Công cụ cho nhà phát triển liên quan đến cookie. Điều này đặc biệt quan trọng vì Google Chrome và các trình duyệt khác đã bắt đầu thay đổi hành vi mặc định của cookie.

Trong khi nghiên cứu các công cụ mà DevTools đã cung cấp, chúng ta thường gặp phải trường hợp như sau:

Vấn đề trong bảng điều khiển của Console

😰 Bảng điều khiển có rất nhiều cảnh báo và thông báo lỗi, chứa những nội dung giải thích khá kỹ thuật và đôi khi có cả đường liên kết đến chromestatus.com. Tất cả thông báo đều có vẻ quan trọng ngang nhau, khiến bạn khó biết được cần giải quyết vấn đề nào trước. Quan trọng hơn, văn bản không liên kết đến thông tin bổ sung bên trong DevTools, khiến bạn khó hiểu điều gì đã xảy ra. Cuối cùng, thông báo thường để nhà phát triển web tự tìm hiểu cách khắc phục vấn đề hoặc thậm chí tìm hiểu về ngữ cảnh kỹ thuật.

Nếu cũng sử dụng bảng điều khiển cho các thông báo từ ứng dụng của riêng mình, đôi khi bạn sẽ khó tìm thấy các thông báo đó giữa tất cả thông báo từ trình duyệt.

Cũng như con người, các quy trình tự động cũng khó tương tác với thông báo trên bảng điều khiển. Ví dụ: nhà phát triển có thể sử dụng Chrome Headless và Puppeteer trong trường hợp Tích hợp liên tục/Triển khai liên tục. Vì thông điệp của bảng điều khiển chỉ là chuỗi, nên nhà phát triển cần viết biểu thức chính quy hoặc một số trình phân tích cú pháp khác để trích xuất thông tin hữu ích.

Giải pháp: báo cáo vấn đề có cấu trúc và hữu ích

Để tìm giải pháp tốt hơn cho các vấn đề đã phát hiện, trước tiên, chúng tôi bắt đầu suy nghĩ về các yêu cầu và thu thập chúng trong một Tài liệu thiết kế.

Mục tiêu của chúng tôi là trình bày các vấn đề theo cách giải thích rõ ràng về vấn đề và cách khắc phục vấn đề. Từ quy trình thiết kế của mình, chúng tôi nhận ra rằng mỗi vấn đề nên bao gồm bốn phần sau:

  • Tiêu đề
  • Mô tả
  • Đường liên kết đến các tài nguyên bị ảnh hưởng trong DevTools
  • Và đường liên kết đến hướng dẫn khác

Đối với tiêu đề, chúng tôi muốn tiêu đề ngắn gọn và chính xác để giúp nhà phát triển hiểu vấn đề cốt lõi và thường đã gợi ý cách khắc phục. Ví dụ: vấn đề về cookie hiện chỉ đọc:

Đánh dấu cookie trên nhiều trang web là Bảo mật để cho phép đặt cookie trong bối cảnh trên nhiều trang web

Mỗi vấn đề đều chứa thông tin chi tiết hơn trong phần mô tả, giải thích điều gì đã xảy ra, đưa ra lời khuyên hữu ích về cách khắc phục và đường liên kết đến các bảng điều khiển khác bên trong DevTools để hiểu rõ vấn đề trong ngữ cảnh. Chúng tôi cũng cung cấp đường liên kết đến các bài viết chuyên sâu trên web.dev để nhà phát triển web có thể tìm hiểu chi tiết hơn về chủ đề này.

Một phần quan trọng của mỗi vấn đề là phần tài nguyên bị ảnh hưởng. Phần này liên kết đến các phần khác của DevTools và giúp bạn dễ dàng điều tra thêm. Đối với ví dụ về vấn đề về cookie, sẽ có một danh sách các yêu cầu mạng đã kích hoạt vấn đề và khi nhấp vào yêu cầu đó, bạn sẽ được chuyển trực tiếp đến bảng điều khiển Mạng. Chúng tôi hy vọng rằng việc này không chỉ thuận tiện mà còn giúp bạn biết được những bảng điều khiển và công cụ nào trong DevTools có thể dùng để gỡ lỗi một loại vấn đề nhất định.

Khi nghĩ về việc tương tác của nhà phát triển với thẻ Vấn đề trong dài hạn, chúng tôi hình dung sự phát triển sau đây của hoạt động tương tác của nhà phát triển:

  • Khi gặp một vấn đề cụ thể lần đầu tiên, nhà phát triển web sẽ đọc bài viết để hiểu rõ vấn đề.
  • Khi gặp phải vấn đề lần thứ hai, chúng tôi hy vọng nội dung mô tả vấn đề sẽ đủ để nhắc nhà phát triển về vấn đề, đồng thời cho phép họ điều tra và hành động ngay để giải quyết vấn đề.
  • Sau khi gặp một vấn đề vài lần, chúng tôi hy vọng rằng nhà phát triển có thể nhận ra loại vấn đề chỉ bằng tiêu đề vấn đề.

Một khía cạnh quan trọng khác mà chúng tôi muốn cải thiện là tính năng tổng hợp. Ví dụ: nếu cùng một cookie gây ra cùng một vấn đề nhiều lần, chúng tôi chỉ muốn báo cáo cookie đó một lần. Ngoài việc giảm đáng kể số lượng thông báo, việc này thường giúp xác định nguyên nhân gốc rễ của vấn đề nhanh hơn.

Vấn đề tổng hợp

Việc triển khai

Với những yêu cầu đó, nhóm đã bắt đầu tìm hiểu cách triển khai tính năng mới. Các dự án cho Công cụ của Chrome cho nhà phát triển thường trải dài trên 3 lĩnh vực:

Sau đó, quá trình triển khai bao gồm 3 nhiệm vụ:

  • Bên trong Chromium, chúng tôi phải xác định các thành phần có thông tin mà chúng tôi muốn hiển thị và làm cho thông tin đó có thể truy cập được vào Giao thức Công cụ cho nhà phát triển mà không ảnh hưởng đến tốc độ hoặc tính bảo mật.
  • Sau đó, chúng tôi cần thiết kế Giao thức công cụ phát triển Chrome (CDP) để xác định API hiển thị thông tin cho ứng dụng, chẳng hạn như giao diện người dùng của DevTools.
  • Cuối cùng, chúng ta cần triển khai một thành phần trong phần giao diện người dùng của DevTools để yêu cầu thông tin từ trình duyệt thông qua CDP và hiển thị thông tin đó trong một giao diện người dùng thích hợp để nhà phát triển có thể dễ dàng diễn giải và tương tác với thông tin.

Đối với phía trình duyệt, trước tiên, chúng ta đã xem xét cách xử lý thông báo của bảng điều khiển vì hành vi của các thông báo này rất giống với những gì chúng ta dự kiến cho các vấn đề. CodeSearch thường là điểm khởi đầu phù hợp cho những dữ liệu khám phá như vậy. Công cụ này cho phép bạn tìm kiếm và khám phá toàn bộ mã nguồn của dự án Chromium trên mạng. Bằng cách đó, chúng ta đã tìm hiểu về cách triển khai thông báo của bảng điều khiển và có thể xây dựng một cách song song nhưng có cấu trúc hơn dựa trên các yêu cầu mà chúng ta đã thu thập được cho các vấn đề.

Công việc ở đây đặc biệt khó khăn vì chúng tôi luôn phải chú ý đến tất cả các hệ quả về bảo mật. Dự án Chromium đã đi một chặng đường dài để tách biệt mọi thứ thành các quy trình khác nhau và chỉ cho phép chúng giao tiếp thông qua các kênh giao tiếp được kiểm soát để ngăn chặn rò rỉ thông tin. Các vấn đề có thể chứa thông tin nhạy cảm, vì vậy, chúng ta phải cẩn thận để không gửi thông tin đó đến một phần của trình duyệt không nên biết thông tin đó.

Trong giao diện người dùng Công cụ cho nhà phát triển

Bản thân DevTools là một ứng dụng web được viết bằng JavaScript và CSS. Ứng dụng này rất giống với nhiều ứng dụng web khác, ngoại trừ việc đã tồn tại hơn 10 năm. Và tất nhiên, phần phụ trợ của công cụ này về cơ bản là một kênh giao tiếp trực tiếp với trình duyệt: Giao thức Công cụ dành cho nhà phát triển của Chrome.

Đối với thẻ Vấn đề, trước tiên, chúng tôi đã nghĩ đến câu chuyện người dùng và những việc nhà phát triển phải làm để giải quyết vấn đề. Ý tưởng của chúng tôi chủ yếu xoay quanh việc sử dụng thẻ Vấn đề làm điểm xuất phát trung tâm cho các cuộc điều tra, giúp người dùng chuyển đến các bảng hiển thị thông tin chi tiết hơn. Chúng tôi quyết định đặt thẻ Vấn đề cùng với các thẻ khác ở cuối DevTools để thẻ này có thể vẫn mở trong khi nhà phát triển tương tác với một thành phần DevTools khác, chẳng hạn như Mạng hoặc bảng điều khiển Ứng dụng.

Do đó, nhà thiết kế trải nghiệm người dùng của chúng tôi đã hiểu rõ mục tiêu của chúng tôi và tạo bản mô hình cho các đề xuất ban đầu sau:

Nguyên mẫu

Sau nhiều cuộc thảo luận về giải pháp tốt nhất, chúng tôi bắt đầu triển khai thiết kế và lặp lại các quyết định để dần dần đi đến giao diện của thẻ Vấn đề như hiện tại.

Một yếu tố rất quan trọng khác là khả năng khám phá của thẻ Vấn đề. Trước đây, nhiều tính năng tuyệt vời của Devtools không thể được khám phá nếu nhà phát triển không biết cụ thể cần tìm gì. Đối với thẻ Vấn đề, chúng tôi quyết định làm nổi bật các vấn đề ở nhiều khía cạnh để đảm bảo nhà phát triển không bỏ lỡ các vấn đề quan trọng.

Chúng tôi quyết định thêm một thông báo vào bảng điều khiển của bảng điều khiển vì một số thông báo nhất định trên bảng điều khiển hiện đã bị xoá để ưu tiên các vấn đề. Chúng tôi cũng thêm một biểu tượng vào bộ đếm cảnh báo và lỗi ở trên cùng bên phải của cửa sổ Công cụ cho nhà phát triển.

Thông báo vấn đề

Cuối cùng, thẻ Vấn đề không chỉ liên kết đến các bảng điều khiển khác của Công cụ cho nhà phát triển, mà các tài nguyên liên quan đến một vấn đề cũng liên kết ngược đến thẻ Vấn đề.

Các sự cố liên quan

Trong giao thức

Hoạt động giao tiếp giữa giao diện người dùng và phần phụ trợ hoạt động qua một giao thức có tên là Giao thức DevTools của Chromium (CDP). CDP có thể được coi là phần phụ trợ của ứng dụng web là Công cụ của Chrome cho nhà phát triển. CDP được chia nhỏ thành nhiều miền và mỗi miền chứa một số lệnh và sự kiện.

Đối với thẻ Vấn đề, chúng tôi quyết định thêm một sự kiện mới vào miền Kiểm tra. Sự kiện này sẽ kích hoạt bất cứ khi nào gặp phải vấn đề mới. Để đảm bảo rằng chúng ta cũng có thể báo cáo các vấn đề phát sinh khi DevTools chưa mở, miền Kiểm tra sẽ lưu trữ các vấn đề gần đây nhất và gửi các vấn đề đó ngay khi DevTools kết nối. Sau đó, DevTools sẽ thu thập tất cả các vấn đề đó và tổng hợp chúng.

CDP cũng cho phép các ứng dụng giao thức khác, chẳng hạn như Puppeteer, nhận và xử lý các vấn đề. Chúng tôi hy vọng thông tin có cấu trúc về vấn đề được gửi qua CDP sẽ giúp đơn giản hoá việc tích hợp vào cơ sở hạ tầng tích hợp liên tục hiện có. Nhờ đó, bạn có thể phát hiện và khắc phục vấn đề ngay cả trước khi triển khai trang!

Tương lai

Trước tiên, chúng tôi phải chuyển nhiều thông báo hơn từ bảng điều khiển sang thẻ Vấn đề. Quá trình này sẽ mất chút thời gian, đặc biệt là vì chúng tôi muốn cung cấp tài liệu rõ ràng và hữu ích cho mọi vấn đề mới mà chúng tôi thêm vào. Chúng tôi hy vọng rằng trong tương lai, nhà phát triển sẽ tìm kiếm vấn đề trong thẻ Vấn đề thay vì bảng điều khiển!

Ngoài ra, chúng tôi đang suy nghĩ cách tích hợp các vấn đề từ các nguồn khác ngoài phần phụ trợ Chromium vào thẻ Vấn đề.

Chúng tôi đang tìm cách sắp xếp gọn gàng thẻ Vấn đề và cải thiện khả năng hữu dụng. Tính năng tìm kiếm, lọc và tổng hợp tốt hơn đã có trong danh sách của chúng tôi năm nay. Để sắp xếp số lượng vấn đề được báo cáo ngày càng tăng, chúng tôi đang trong quá trình giới thiệu các danh mục vấn đề, chẳng hạn như chỉ cho thấy các vấn đề liên quan đến việc ngừng sử dụng sắp tới. Chúng tôi cũng đang cân nhắc việc thêm tính năng tạm ngưng để nhà phát triển có thể tạm thời ẩn các vấn đề.

Để giúp bạn có thể xử lý các vấn đề, chúng tôi muốn giúp bạn dễ dàng phát hiện phần nào của trang đã kích hoạt vấn đề. Cụ thể, chúng tôi đang suy nghĩ về những cách để phân biệt và lọc những vấn đề thực sự xuất phát từ trang của bạn (tức là của bên thứ nhất) khỏi những vấn đề được kích hoạt bởi các tài nguyên bạn nhúng, nhưng không thuộc quyền kiểm soát trực tiếp của bạn (chẳng hạn như mạng quảng cáo). Bước đầu tiên là bạn có thể ẩn các vấn đề về cookie của bên thứ ba trong Chrome 86.

Nếu bạn có đề xuất giúp cải thiện thẻ Vấn đề, hãy cho chúng tôi biết bằng cách báo cáo lỗi!

Tải các kênh xem trước xuống

Hãy cân nhắc sử dụng Chrome Canary, Dev hoặc Beta làm trình duyệt phát triển mặc định. Các kênh xem trước này cho phép bạn sử dụng các tính năng mới nhất của DevTools, kiểm thử các API nền tảng web tiên tiến và giúp bạn tìm thấy vấn đề trên trang web của mình trước khi người dùng phát hiện ra!

Liên hệ với nhóm Công cụ của Chrome cho nhà phát triển

Hãy sử dụng các lựa chọn sau để thảo luận về các tính năng, bản cập nhật mới hoặc bất kỳ nội dung nào khác liên quan đến Công cụ cho nhà phát triển.