こちらではブラウザの Microsoft Edge でデベロッパーツールを使ってタブのフォーカスを固定する方法をご紹介します、例えば他のタブやウインドウを操作するとそのサイトで流れていた動画や音楽が止まってしまうサイトとかってありますよね、フォーカスを固定する事でこういったサイトを止めずに他の作業を行えるようになるんです、「別のタブやウインドウを操作すると動作が止まってしまうサイトの対処方法」の記事でもご紹介したデベロッパーツールのページがフォーカスされている状態をエミュレートする機能を利用するのですが、前の記事ではブラウザの Chrome でこの機能をオンにする方法をご紹介していました、そして Edge のデベロッパーツールでも同じ事ができるのですがブラウザが違うとデベロッパーツールのレイアウトも微妙に違うんですよね、なので前の Chrome の記事を見ながら探してもどこにあるの？という感じだと思います、という事で今回は Edge のデベロッパーツールでこの「ページがフォーカスされている状態をエミュレート」する機能をオンにする手順を確認してみましょう。
まず Microsoft Edge を開いたらフォーカスを固定したいサイトを開いてください、次にページの何もないところを右クリックしてメニューから「開発者ツールで調査する」を選択してデベロッパーツールを開きます、ちなみにキーボードの「F12」キーでもデベロッパーツールを開いたり閉じたりする事ができるので覚えておくと便利ですね、「開発者ツールを開きますか？」のポップアップが表示されたら「DevTools を開く」ボタンをクリックしましょう、この時ポップアップの「決定を記録する」を選んでおくと次回からこの確認作業を省くことができます。
これでページの右側になんかコードが沢山書いてあるサイドバーが開きましたよね、このサイドバーがデベロッパーツール（DevTools）です。
では Edge のデベロッパーツールで「Emulate a focused page」をオンにしてみましょう、まずデベロッパーツールの一番下の項目をご覧頂くと「Console」というタブが開いている（青文字）状態だと思いますが、こちらのタブバーに「Rendering」というタブがあったらクリックしてください、上の画像のように「Rendering」のタブが開いていない場合はタブバーの「+」ボタンをクリックして。
「More tools」のメニューが開いたら一覧から「Rendering」を選択します。
これで「Rendering」タブが開くのであとは「Emulate a focused page」にチェックマークを付けるだけですね、ちなみに元々の機能はデベロッパーツールにフォーカスが移ってもページ側のフォーカスは維持するという機能なんです、なのでサイト側が自分は今アクティブな状態なのだと勘違いしちゃう訳ですね、あと元々はそういう機能なのでデベロッパーツールは開いたままにしておいてください、閉じるとフォーカス固定の効果が無くなります、フォーカスの固定が必要なくなったらデベロッパーツールを閉じましょう。
コメント