「デバイスのツールバーを切り替え」とは、Chrome に付属している「DevTools（開発者ツール）」の一機能で、PC で開いた Webページをスマホやタブレットなどで開いた場合の画面表示が確認できます。
「DevTools」については解説済みですが、ブラウザーを開いた状態でファンクションキー「F12」を押すと画面右側に表示されるツールです。
この「DevTools」の上部左端から２つ目が「デバイスのツールバーを切り替え」アイコンです。
このアイコンをクリックすると画面左側に現在開いている Webページの画面サイズを変更して表示することが可能となります。
画面左の上部に現れるバーに「サイズ」という項目があります。
クリックすると「iPhoneX」「iPad」など代表的な端末名が並んでいます。
このリストから選択した端末での表示が疑似的に再現されます。
「疑似的」なので実際の表示とは違う部分もありますが、かなり近い画面になります。ただし一度、再読み込み（F5）する必要があります。
この機能を使うと、たとえばサイトの開発者はスマホやタブレットでどう表示されるか確認できるわけです。
開発者でなくてもスマホやタブレットでどう表示されるかパソコン上で確認したいときに利用できます。
同じ機能が Edge の「DevTools」にもあり、同じく上部左端から２つ目のアイコンで名前は「デバイス エミューレーションの切り替え」です。
違うのは名前だけで、機能も使い方も同じです。
ブラウザーがあれば誰でも使える機能なので紹介しました。
記事の情報は公開時あるいは更新時のもので、最新情報はリンク先など情報元の公式ページでご確認ください。
