Firefoxは^(Firefox)WindowsPCで人気のあるブラウザです。FirefoxおよびChromeの開発者ツールバー^{(Developer Toolbar)}を使用すると、ブラウザのアドオンやサードパーティの画面キャプチャソフトウェア^{(screen capture software)}を使用せずに、ブラウザウィンドウのスクリーンショットを撮ることができます。このチュートリアルでは、サードパーティのソフトウェアを使用またはインストールせずに、ChromeまたはFirefoxブラウザでスクリーンショットをネイティブにキャプチャする方法を示します。^{(capture screenshots in Chrome or Firefox browser)}

もちろん、Windowsでデスクトップスクリーンショットをキャプチャするには、 ^{(capturing Desktop screenshots on Windows)}PrintScreen^{(Prnt Scrn)}キーまたはPrntScrn^{(Print Screen)}キーを押していることに注意してください。キーボードの右上のセクションにあります。アクティブなウィンドウのみをキャプチャするには、Altキーを押しながらPrintScreenキーを押します。組み込みの開発ツール^{(Developer Tools)}を使用してそれを行う方法を見てみましょう。

Chromeブラウザでスクリーンショット^{(Screenshots)}をキャプチャする

スクリーンキャプチャは、興味深いチュートリアルをオンラインで見つけて、後で参照できるようにWebページのコピーをスクリーンショットとしてコンピュータに保存する場合に非常に役立ちます。同じことをしたい場合は、以下の投稿で概説されている手順に従って、GoogleChromeの任意のWebページのフルページのスクリーンショットを撮ってください^{(Google Chrome)}。

まず、Google Chromeを起動し、画面をキャプチャするWebページに移動します。

そこで、コンピュータ画面の右上隅に表示されているブラウザのハンバーガーアイコンをクリックします。

次に、アクションのメニューが展開されたら[その他のツール]を選択し、後で[^{(More tools)}開発者ツール^{(Developer tools)}]オプションを選択します。

その後、開発者ツール^{(Developer Tools)}の小さなウィンドウが表示されます。下の画像に示すように、[デバイスモードの切り替え]ボタンを^{(Toggle Device Mode)}クリックして、オプションをアクティブにします。^(Click)有効にすると、ボタンの色が青色に変わります。

ここで、[開発者ツール]^{(Developer Tools)}ウィンドウを最小化し、背景にスクリーンショットを設定します。また、デバイスのドロップダウンメニューからスクリーンショットに適したデバイスタイプを選択します。

必要に応じて、スクリーンショットのサイズと向きを構成します。

終了したら、右端にある3つのドットのアイコンをクリックし、表示されたオプションのリストから、「スクリーンショットのキャプチャ^{(Capture screenshot)}」として表示されているものを選択します。

That’s it!

Firefoxブラウザでスクリーンショットを撮る

ヒント^(TIP)：Firefoxのスクリーンショット^{(enable the Firefox Screenshots)}機能を有効にできるようになりました。

Mozilla Firefoxブラウザーを開き、画面をキャプチャするWebページに移動します。そこに到達したら、右上隅に表示されている[その他のアクション]アイコンをクリックします。^{(More Actions)}

開発者タイル^{(Developer Tile)}を選択します。これにより、Web開発者ツールが開きます。Ctrl+Shift+I 」を押して開発者ツールを起動することもできます。

次に、表示されたオプションのリストから、「レスポンシブデザインモード^{(Responsive Design Mode)}」として読み取ったものを選択します。

ここで、必要に応じて、正しいオプションセットを構成することにより、スクリーンショットのサイズと向きを設定できます。すべてが整ったら、カメラ^(Camera)ボタンを押して画面を表示します。

最後に、キャプチャしたスクリーンショットをコンピューターの目的の場所に保存します。

スクリーンショットは、さまざまなWebブラウザーおよびシステムでブラウザーの互換性を徹底的にチェックするためにブラウザーのスクリーンショットを撮るWebデザイナーにとって非常に役立ちます。^(Web)目的が何であれ、これらの開発者ツールを使用して、ChromeまたはFirefoxブラウザを使用してネイティブにスクリーンショットを撮ることができます。^(Firefox)

次を読む^{(Read next)}：ウェブサイトのスクリーンショットをリモートで撮る方法^{(How to take screenshots of a website remotely)}。

Capture or take Screenshots in Chrome or Firefox browser natively

Firefox is a popular browser for Windows PC. The Developer Toolbar in Firefox and Chrome allows you to take screenshots of the browser window without using any browser add-ons or 3rd-party screen capture software. This tutorial will show you how to capture screenshots in Chrome or Firefox browser natively, without using or installing any third-party software.

You are of course aware that for capturing Desktop screenshots on Windows, you have press the Print Screen or Prnt Scrn key. It can be found in the upper right section of your keyboard. To capture only the active window, hold down the Alt key, before you press the Print Screen key. Let us see how to do it using the built-in Developer Tools.

Capture Screenshots in Chrome browser

Screen Captures can be immensely useful in cases where you come across an interesting tutorial online and would want to save a copy of the web page as a screenshot on your computer for reference, later. If you want to do the same, follow the steps outlined in the post below to help you take full-page screenshot of any web page in Google Chrome.

First, launch Google Chrome and navigate to the web page whose screen you would like to capture.

Once there, click the hamburger icon of the browser, visible in the upper right-hand corner of your computer screen.

Next, chose ‘More tools’ when the menu of action expands and later, select ‘Developer tools’ options.

Thereafter, a small window for Developer Tools will show up. Click on the Toggle Device Mode button as shown in the image below to activate the option. Once activated, the button will turn blue in color.

Here, minimize the Developer Tools window and in the backdrop set up your screenshot. Also, select the right device type for your screenshot from the device drop-down menu.

If required, configure the size and orientation of the screenshot.

Once finished, click on the 3-dots icon in the extreme right corner, and from the list of options displayed, select the one reading as ‘Capture screenshot’.

That’s it!

Take Screenshots in Firefox Browser

TIP: You can now enable the Firefox Screenshots feature.

Open the Mozilla Firefox browser and go to the web page whose screen you would like to capture. Once there, click on More Actions icon visible in the upper right-hand corner.

Choose the Developer Tile. This will open the web developer tools. Alternatively, you can press ‘Ctrl+Shift+I’ to launch the developer tools.

Next, from the list of options displayed, select the one reading as ‘Responsive Design Mode’.

Here, if required, you can set up the size and orientation for your screenshot by configuring the correct set of options. Once you find all things in place, hit the Camera button to grab the screen.

Finally, save the captured screenshot to the desired location on your computer.

Screenshots can be of immense use to Web designers who take browser screenshots for performing a thorough checking of browser compatibility in different web browsers and systems. Whatever the purposes maybe you can always rely on Chrome or Firefox browser to take a screenshot natively, using these developer tools.

Read next: How to take screenshots of a website remotely.

Related posts

• Chrome and FirefoxのCache、Cookies、Browsing Historyをクリアする方法

• Chrome or Firefoxコンピュータにファイルをダウンロードまたは保存することはできません

• Chrome、Firefox、EdgeのAdobe Flash、Shockwave、Adobe Flash、Firefox、Edgeを無効にします

• [FIX]：RECAPTCHA Chrome、Firefox、または任意のブラウザで動作していません

• 修正：Vimeo Chrome or Firefoxで動作していません

• Full Screen modeのChrome、Edge or Firefox browserを開く方法

• TabsをEdge、Chrome and Firefox browsersの間で同期する方法

• Chrome、Firefox、Edgeのブラウザで自動リダイレクトを停止する方法

• Flash work、Flash work、Edge、Edge、Firefox NOW

• Lazy Loadingは何ですか？ Chrome、Firefox、Edgeで有効または無効にする

• 400 Bad Request、Cookie Too Large - Chrome、Edge、Firefox、すなわち

• Chrome、Firefox or Edge browserでパスワードを保存するのは安全ですか？

• Restart Chrome、Edge or Firefox Windows 11/10でタブを失うことなく

• Chrome、Firefox for Dark Readerを使用してDark Modeを有効にします

• Force Links Tab Chrome、Edge、Firefox、Opera

• Best Kodi Chrome & Firefoxのアドオンと拡張機能

• Chrome or FirefoxでNews and Interests linksを開く方法。 Edgeではありません

• Chrome and Firefox browserのすべてのオープンTabsのURLsのコピー方法

• Chrome or FirefoxでWebページをPDFとして保存する方法

• Always ChromeのDownload button、Firefox and Edgeを表示します