Trong quý cuối cùng của năm 2019, nhóm Công cụ của Chrome cho nhà phát triển đã 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 tìm hiểu các công cụ mà Công cụ cho nhà phát triển đã cung cấp, chúng tôi thường gặp phải một tình huống như sau:
😰 Bảng điều khiển này chứa rất nhiều cảnh báo và thông báo lỗi, trong đó chứa nội dung giải thích tương đối kỹ thuật và đôi khi là đường liên kết đến chromestatus.com. Tất cả thông báo đều quan trọng như nhau, khiến người dùng khó xác định 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 Công cụ cho nhà phát triển, khiến khó hiểu được điều gì đã xảy ra. Và cuối cùng, các thông báo thường được để lại hoàn toàn cho nhà phát triển web để tìm ra cách khắc phục vấn đề hoặc thậm chí là tìm hiểu về các bối cảnh kỹ thuật.
Nếu bạn cũng sử dụng bảng điều khiển này cho các thông báo từ ứng dụng của riêng bạn, đôi khi bạn sẽ gặp khó khăn trong việc tìm chúng giữa tất cả cá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 tình huống Tích hợp liên tục/Triển khai liên tục. Vì các thông báo trong bảng điều khiển chỉ là chuỗi nên nhà phát triển cần phải 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à thiết thực
Để tìm ra giải pháp tốt hơn cho các vấn đề phát hiện được, trước tiên, chúng tôi bắt đầu suy nghĩ về các yêu cầu rồi tập hợp các yêu cầu đó vào Tài liệu thiết kế.
Mục tiêu của chúng tôi là trình bày vấn đề theo cách giải thích rõ ràng vấn đề và cách khắc phục vấn đề. Từ quá trình thiết kế, chúng tôi nhận thấy rằng mỗi vấn đề cần bao gồm 4 phần sau:
- Tiêu đề
- Nội dung mô tả
- Đường liên kết đến những tài nguyên bị ảnh hưởng trong Công cụ cho nhà phát triển
- Và một đường liên kết để được hướng dẫn thêm
Đối với tiêu đề, chúng tôi muốn tiêu đề phải ngắn gọn và chính xác để giúp nhà phát triển nắm được vấn đề cốt lõi, đồng thời thường gợi ý cách khắc phục. Ví dụ: giờ đây, một vấn đề về cookie chỉ đọc được:
Đánh dấu cookie trên nhiều trang web là An toàn để cho phép đặt cookie trong ngữ cảnh 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 những gì đã xảy ra, đưa ra lời khuyên khả thi về cách khắc phục vấn đề và đường liên kết đến các bảng điều khiển khác bên trong Công cụ cho nhà phát triển để tìm hiểu vấn đề theo 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 để giúp các nhà phát triển web tìm hiểu chi tiết hơn về chủ đề đó.
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 với các phần khác của Công cụ cho nhà phát triển và giúp bạn dễ dàng điều tra thêm. Đối với ví dụ về vấn đề liên quan đến cookie, cần có một danh sách các yêu cầu mạng đã kích hoạt vấn đề. Thao tác nhấp vào yêu cầu đó sẽ trực tiếp đưa bạn đến bảng điều khiển Mạng. Chúng tôi hy vọng rằng giải pháp này không chỉ thuận tiện mà còn củng cố những bảng điều khiển và công cụ bên trong Công cụ cho nhà phát triển có thể dùng để gỡ lỗi một loại vấn đề nhất định.
Liên quan đến hoạt động tương tác lâu dài của nhà phát triển với thẻ Vấn đề, chúng tôi hình dung quá trình tương tác sau đây của nhà phát triển:
- Trong lần đầu tiên gặp phải một vấn đề cụ thể, nhà phát triển web sẽ đọc bài viết để tìm hiểu chi tiết về vấn đề đó.
- Khi gặp vấn đề này lần thứ hai, chúng tôi hy vọng rằng nội dung mô tả vấn đề đủ để nhắc nhà phát triển về vấn đề, đồng thời giúp họ điều tra và xử lý ngay lập tức.
- Sau khi gặp vấn đề một vài lần, chúng tôi hy vọng rằng tiêu đề của vấn đề đã đủ để nhà phát triển nhận ra loại 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ổ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ư, cách này thường giúp xác định nguyên nhân gốc của vấn đề nhanh hơn.
Quá trình triển khai
Sau khi đáp ứng những yêu cầu đó, nhóm bắt đầu xem xét 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 bao gồm ba phần khác nhau:
- Chromium, dự án nguồn mở được viết bằng C++ sau Google Chrome
- Giao diện người dùng DevTools, cách triển khai JavaScript của Công cụ của Chrome cho nhà phát triển
- Giao thức Công cụ của Chrome cho nhà phát triển (CDP), lớp kết nối cả hai
Khi đó, 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 cho 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ụ của Chrome cho nhà phát triển (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 Công cụ cho nhà phát triển.
- Cuối cùng, chúng ta cần triển khai một thành phần trong giao diện người dùng DevTools. Thành phần này yêu cầu thông tin từ trình duyệt thông qua CDP và hiển thị thông tin đó trong 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.
Về phía trình duyệt, trước tiên, chúng tôi xem xét cách xử lý các thông báo trên 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 hành vi của chúng tôi đối với các vấn đề. CodeSearch thường là điểm khởi đầu phù hợp cho các dữ liệu khám phá như thế này. Trình quản lý thẻ của Google cho phép bạn tìm kiếm và khám phá trực tuyến toàn bộ mã nguồn của dự án Chromium. Bằng cách đó, chúng tôi đã tìm hiểu về cách triển khai các thông báo trên bảng điều khiển và có thể xây dựng một quy trình song song nhưng có cấu trúc rõ ràng hơn đối với các yêu cầu mà chúng tôi thu thập được cho các vấn đề.
Công việc ở đây đặc biệt khó khăn vì tất cả các hệ quả về bảo mật mà chúng tôi luôn phải lưu ý. Dự án Chromium có một bước tiến dài để tách riêng mọi thứ thành các quy trình khác nhau và yêu cầu chúng chỉ giao tiếp thông qua các kênh liên lạc được kiểm soát để ngăn chặn rò rỉ thông tin. Các sự cố có thể chứa thông tin nhạy cảm, vì vậy chúng tôi phải cẩn thận để không gửi thông tin đó đến phần trình duyệt không nên biết về 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. Google Play rất giống với nhiều ứng dụng web khác, ngoại trừ việc ứng dụng này đã tồn tại được hơn 10 năm. Và tất nhiên phần phụ trợ của nó về cơ bản là kênh liên lạc trực tiếp với trình duyệt: Giao thức Công cụ của Chrome cho nhà phát triển.
Đối với thẻ Vấn đề, trước tiên chúng tôi đã nghĩ về câu chuyện của người dùng và những việc nhà phát triển cần làm để giải quyết vấn đề. Các ý tưởng của chúng tôi chủ yếu phát triển xung quanh việc lấy thẻ Vấn đề làm điểm khởi đầu chính cho các cuộc điều tra, trong đó liên kết mọi người với những 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 Công cụ cho nhà phát triển để thẻ có thể luôn mở trong khi nhà phát triển tương tác với một thành phần Công cụ cho nhà phát triển khác, chẳng hạn như Mạng hoặc bảng điều khiển Ứng dụng.
Khi hiểu được điều đó, nhà thiết kế trải nghiệm người dùng của chúng tôi hiểu mục tiêu của chúng tôi và đã tạo mẫu cho các đề xuất ban đầu như sau:
Sau rất 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 để từng bước đi đến giao diện của thẻ Vấn đề ngày hôm nay.
Một yếu tố rất quan trọng khác là khả năng được phát hiện của thẻ Vấn đề. Trước đây, nhiều nhà phát triển không thể tìm thấy nhiều tính năng hữu ích của công cụ cho nhà phát triển nếu họ không biết nên tìm kiếm những tính năng gì. Đối với thẻ Vấn đề, chúng tôi quyết định làm nổi bật các vấn đề theo nhiều lĩnh vực để đả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 vì một số thông báo trên bảng điều khiển hiện đã bị xoá và thay vào đó là 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.
Cuối cùng, thẻ Vấn đề không chỉ liên kết đến các bảng điều khiển Công cụ cho nhà phát triển khác, mà còn liên kết những tài nguyên có liên quan đến vấn đề cũng liên kết trở lại thẻ Vấn đề.
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 thông qua một giao thức có tên là Giao thức công cụ cho nhà phát triển 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 mỗi khi xảy ra vấn đề mới. Để đảm bảo rằng chúng tôi cũng có thể báo cáo về các sự cố phát sinh khi Công cụ cho nhà phát triển chưa được mở, miền Kiểm tra lưu trữ các sự cố gần đây nhất và gửi chúng ngay khi Công cụ cho nhà phát triển kết nối. Sau đó, Công cụ cho nhà phát triển sẽ thu thập tất cả những 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 sự cố. Chúng tôi hy vọng thông tin về vấn đề có cấu trúc được gửi qua CDP sẽ hỗ trợ và đơn giản hoá quá trình tích hợp vào cơ sở hạ tầng tích hợp liên tục hiện có. Bằng cách này, các vấn đề có thể được phát hiện và khắc phục ngay cả trước khi triển khai trang!
Hồ sơ
Trước hết, bạn cần chuyển rất nhiều thông báo 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à có thể hành động 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, các nhà phát triển sẽ tìm kiếm vấn đề trong thẻ Vấn đề thay vì trên bảng điều khiển!
Ngoài ra, chúng tôi đang suy nghĩ cách tích hợp vấn đề từ các nguồn khác ngoài chương trình phụ trợ của 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 hiệu quả hơn đều có trong danh sách của chúng tôi cho năm nay. Để xác định 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 áp dụng các danh mục vấn đề, chẳng hạn như để có thể chỉ hiển thị các vấn đề về việc ngừng sử dụng trong thời gian tới. Chúng tôi cũng đang cân nhắc việc thêm tính năng tạm ẩn mà nhà phát triển có thể sử dụng để tạm thời ẩn các vấn đề.
Để giải quyết vấn đề, chúng tôi muốn giúp bạn dễ dàng khám phá phần nào của trang đã gây ra vấn đề. Cụ thể, chúng tôi đang suy nghĩ về cách phân biệt và lọc các vấn đề thực sự trên trang của bạn (tức là bên thứ nhất) khỏi các vấn đề do tài nguyên bạn nhúng gây ra, nhưng không trực tiếp thuộc quyền kiểm soát của bạn (chẳng hạn như mạng quảng cáo). Bước đầu tiên, 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 cải thiện thẻ Vấn đề, hãy cho chúng tôi biết bằng cách báo lỗi.
Tải 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 cung cấp cho bạn quyền truy cập vào các tính năng mới nhất của Công cụ cho nhà phát triển, thử nghiệm API nền tảng web tiên tiến và tìm ra sự cố trên trang web của bạn trước khi người dùng của bạn làm điều đó!
Liên hệ với nhóm Công cụ của Chrome cho nhà phát triển
Sử dụng các lựa chọn sau đây để thảo luận về các tính năng mới và thay đổi trong bài đăng hoặc bất cứ vấn đề nào khác liên quan đến Công cụ cho nhà phát triển.
- Hãy gửi đề xuất hoặc phản hồi cho chúng tôi qua crbug.com.
- Báo cáo sự cố của Công cụ cho nhà phát triển bằng cách sử dụng phần Tuỳ chọn khác
> Trợ giúp > Báo cáo sự cố về Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển. - Tweet tại @ChromeDevTools.
- Hãy để lại bình luận về tính năng mới trong video trên YouTube của Công cụ cho nhà phát triển hoặc video trên YouTube.