“Debug Info” modal

In many cases it would be helpful for students to quickly get debugging information when working with Popcode’s developers to try to resolve issues. So, let’s create a “debug info” feature, accessible from the hamburger menu, that pops up a modal with the following information (plus any more that we can think of):

• User ID (if logged in)
• Raw user agent
• Parsed user agent info from Bowser
• Viewport dimensions

A one-click copy button would be particularly useful here.

Bắt đầu bằng cách xác định menu hamburger và các mẫu modal hiện có trong frontend của Popcode, sau đó xem lại cách Bowser hiện được sử dụng cho thông tin user-agent đã được phân tích. Triển khai chế độ xem debug-info với các trường được liệt kê và thao tác sao chép bằng một lần nhấp, rồi xác minh rằng chế độ xem này mở được từ menu và sao chép thông tin được hiển thị.