“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.

まず、Popcodeフロントエンド内のハンバーガーメニューと既存のモーダルパターンを見つけ、次に、解析された user-agent 情報に対して Bowser が現在どのように使用されているかを確認します。記載されたフィールドとワンクリックのコピーアクションを備えた debug-info ビューを実装し、メニューから開けることと、表示された情報をコピーできることを確認します。