すぐ消えてしまう要素をDevToolsで確認するTips集
はじめに こんばんは！ 皆さんは以下のようなすぐ消えてしまう要素をDevToolsで確認したいときはどうしますか？ 常に表示されるようにわざわざコードを修正してから、DevToolsで要素を確認したりしていませんか？DevToolsをうまく使うことで、わざわざコードの修正をせずとも簡単に要素の確認をできるのでそのちょっとしたTipsのご紹介です！ ① CSSイベントでの確認方法 まずはCSSイベントで要素の表示制御を行っているパターンでの確認方法です。以下のようにCSSイベントのhoverで表示制御をしている要素を例にDevToolsで確認する方法を見ていきましょう！ import "./style.css"; export const Index = () => { return ( <div> <button className="myButton">Button</button> <
タブ内で原文と訳文を同時表示できるChrome拡張機能作った
TL;DR 自分用に作った Chrome 拡張機能を紹介です｡ Chrome 拡張機能のインストールはこちらから ↓ デモ動画 簡単にタブ内で左に原文､右に訳文を表示して､スクロールという形を実現できます｡ きっかけ 最近､仕事上や趣味の個人開発でも英語のドキュメントに当たることが多くなってきました｡ その際の課題として､英語のままだと資料を読むスピードが上がらないという課題がありました｡ そこで､ページを全体を Google 翻訳して日本語で確認したりしていたのですが､ どうしても訳文が微妙に間違っていたり､最後には原文をチェックしておきたくなることも多く 訳文と原文を何度も行き来する必要があり煩わしく感じていました｡ そこで､自分で Chrome 拡張を作成することにしました｡ 設計 動作のデザイン 大まかに一連の流れを整理すると 何かしらの動作 -> タブ内で2画面表示 -> 翻訳
AWS マネジメントコンソール上の秘匿情報を自動で隠す Chrome 拡張機能「AWS Masking」の紹介
AWS マネジメントコンソールでスクショ撮ったり画面共有したりする際に色々隠すの面倒なので、自動で隠してくれる Chrome 拡張機能を作りました。 こういうの AWS Masking とは AWS Masking は AWS マネジメントコンソール上の秘匿情報を自動で隠す Chrome 拡張機能です。 Chrome Web Store からブラウザに追加するだけで有効になります。 サポートされている情報は以下の通りです。 これらの情報は AWS マネジメントコンソール上で自動的に隠されます。 Account ID ARN Access Key ID Secret Access Key こんな感じで自動でぼかしフィルターがかかります。 うっかり人前でシークレットキーを表示しちゃっても大丈夫 AWS Masking のアイコンをクリックすると設定用のポップアップが表示され、各情報のマスキング
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
