Web Tips：ブラウザ・ツール

各ブラウザでのプライベート ブラウジングの起動方法

プライベート ブラウジングは、閲覧履歴、ダウンロード履歴、キャッシュ、Cookie などを保存せずにWebサイトを閲覧できるため、プライバシーを保護する目的で使われます。最新ブラウザではほとんどが対応していますので、各ブラウザでの起動方法をまとめてみました。

Chrome デベロッパーツールでのJavaScriptデバッグ方法

Chrome デベロッパーツールでは、強力なJavaScriptデバッグ機能をもっています。
ブレークポイント設定やステップ実行で、効率的にバグの原因を見つけることができます。

Chrome デベロッパーツールでPageSpeed Insightsを使う

PageSpeed Insightsは、Webページのコンテンツを分析し、ページの読み込み時間を短くする方法を提案してくれるオンラインツールです。このツールはChrome デベロッパーツールの拡張機能として組み込めますので、その方法を解説します。

Chrome デベロッパーツール Auditsパネルの使い方

Chrome デベロッパーツールのAuditsパネルでは、Webページを最適化するための診断と改善事項の提案をしてくれます。診断結果に従いローディング時間を短縮するなどして、パフォーマンスを向上させることができます。

Chrome デベロッパーツール Resourcesパネルの使い方

Chrome デベロッパーツールのResourcesパネルでは、Webページを構成するリソースファイルや、Cookie/Web Storageなどのデータを確認できます。

Chrome デベロッパーツール Networkパネルの使い方

Chrome デベロッパーツールのNetworkパネルでは、Webページでロードされるリソースに関するデータを収集することができます。リソースサイズ、ローディング時間、HTTPヘッダーなどを確認することができ、パフォーマンス改善に役立てることができます。

Chrome デベロッパーツール Workspaces機能の設定

Chrome デベロッパーツールにはWorkspacesという、ローカルファイルを直接編集したり保存することができる機能があります。デベロッパーツールを外部エディタとして使い、変更内容がページのリロードなしに即座にブラウザの表示に反映されます。

Chrome デベロッパーツール Sourcesパネルの使い方

Chrome デベロッパーツールのSourcesパネルでは、Webページで使用しているCSSやJavaScriptファイルを編集し、表示に反映させることができます。またJavaScriptのデバッグもこのパネルで行うことができます。

Chrome デベロッパーツール Elementsパネルの使い方

Chrome デベロッパーツールのElementsパネルでは、WebページのHTML/CSSを検証することができます。Web制作者が最もよく使うデベロッパーツールの機能です。ブラウザでの表示がおかしい時は、とにかくこの機能を使ってデバッグするのが問題解決の早道となります。

Chrome デベロッパーツールの使い方概要

Chrome デベロッパーツール(Chrome Developer Tools)は、Google Chromeに組み込まれたWeb開発者向けのツールです。WebページやWebアプリの制作・デバッグ、サイト運用に活用できます。この記事ではデベロッパーツールを使う際の基本的な事項を説明します。

Webサイトのリンク切れチェックソフト「LinkCheker」

Webページ制作完了時には必ずリンク切れをチェックします。外部リンクもありますので、サイト運用でも定期的にリンク切れをチェックしなければなりません。
そんな時に便利なソフト「LinkCheker」を紹介します。

Allway SyncでWebサイトデータを自動バックアップする方法

Allway Syncは、ローカルPC、FTPサーバー、オンラインストレージなどの間で、データの同期ができるソフトウェアです。Webサイトの運用で必要な自動バックアップを、このソフトとWindowsタスクスケジューラを使って実施する方法を解説します。

Chromeデベロッパーツールでモバイルをエミュレートする

Chromeに標準搭載されているデベロッパーツールには、モバイルをエミュレートする機能が豊富に備わっています。デバイス、ユーザーエージェント、画面解像度の指定ができるだけでなく、タッチスクリーンのエミュレートも可能です。

Firefoxのユーザーエージェント切替えによるスマホサイト表示

スマートフォンサイトのデバッグをする際、Firefoxのユーザーエージェント切替えを使って、開発PC上で表示確認する方法を解説します。

ランダムなパスワード・文字列を一括して自動生成するツール

パスワードやファイル名などを決める際、ランダムな文字列を使いたい場合があります。
そのような文字列を一括して自動生成するツールをいくつか紹介します。