DevTools で DivMagic を使用する方法
- 開発者コンソールを開く:
ページを右クリックして「検査」を選択するか、単にショートカットを使用して、ブラウザの開発者コンソールに移動します。
- DivMagic タブを見つけます:
開発者コンソールに入ったら、「Elements」や「Console」などの他のタブの隣にある「DivMagic」タブを見つけます。
- 要素を選択してください:
コピー元の Web ページに移動し、開発ツールの DivMagic タブを使用して、必要な要素を選択してキャプチャします。
- コピーと変換:
要素を選択すると、そのスタイルをコピーしたり、再利用可能な CSS、Tailwind CSS、React、または JSX コードなどに変換したりすることができます。これらはすべて DevTools 内から行うことができます。
DevTools タブがブラウザに表示されない場合は、ポップアップからタブが有効になっていることを確認し、新しいタブを開いて再試行してください。
権限の更新
DevTools の追加に伴い、拡張機能の権限を更新しました。これにより、拡張機能は、アクセスするすべての Web サイトおよび複数のタブに DevTools パネルをシームレスに追加できます。
⚠️ 注記
拡張機能のポップアップから DevTools パネルを有効にすると、Chrome と Firefox では、拡張機能が「アクセスした Web サイト上のすべてのデータを読み取り、変更できる」という警告が表示されます。憂慮すべき文言ではありますが、次のことを保証します。
最小限のデータ アクセス: 当社は、DivMagic サービスを提供するために必要な最低限のデータのみにアクセスします。
データ セキュリティ: 拡張機能によってアクセスされるすべてのデータはローカル マシン上に残り、外部サーバーには送信されません。コピーする要素はデバイス上で生成され、どのサーバーにも送信されません。
プライバシー第一: 当社はお客様のプライバシーとセキュリティの保護に全力で取り組んでいます。詳細については、当社のプライバシー ポリシーをご覧ください。
ご理解とご信頼を賜りますようお願い申し上げます。ご不明な点やご質問がございましたら、お気軽にサポートチームまでお問い合わせください。
DevTools の追加に伴い、拡張機能の権限を更新しました。これにより、拡張機能は、アクセスするすべての Web サイトおよび複数のタブに DevTools パネルをシームレスに追加できます。
⚠️ 注記
拡張機能のポップアップから DevTools パネルを有効にすると、Chrome と Firefox では、拡張機能が「アクセスした Web サイト上のすべてのデータを読み取り、変更できる」という警告が表示されます。憂慮すべき文言ではありますが、次のことを保証します。
最小限のデータ アクセス: 当社は、DivMagic サービスを提供するために必要な最低限のデータのみにアクセスします。
データ セキュリティ: 拡張機能によってアクセスされるすべてのデータはローカル マシン上に残り、外部サーバーには送信されません。コピーする要素はデバイス上で生成され、どのサーバーにも送信されません。
プライバシー第一: 当社はお客様のプライバシーとセキュリティの保護に全力で取り組んでいます。詳細については、当社のプライバシー ポリシーをご覧ください。
ご理解とご信頼を賜りますようお願い申し上げます。ご不明な点やご質問がございましたら、お気軽にサポートチームまでお問い合わせください。
リソース
© 2024 DivMagic, Inc. 全著作権所有。