ワンコンテンツ

web制作とかiPhoneのこととか書いていきます

Web/Design/Creative

【便利】Local Overrideで修正した内容を比較して確認:GoogleChrome

投稿日:

このエントリーをはてなブックマークに追加

以前紹介したGoogleChromeのDevTool・オーバーライドを使っていて、変更したCSSの確認方法がありましたので紹介します。

Local Overrideの設定方法は「オーバーライド機能を使ってCSSを調整しながら即保存する方法」にまとめてありますのでそちらで確認してください。


スポンサーリンク

広告

確認方法はLocal Modifications…

DevtoolのSoucesタブに表示されている編集したファイル名の上で右クリックします。

スクリーンショット_2019-01-24_22_58_50

表示されるメニューの中から「Local Modifications…」を選択します。

スクリーンショット_2019-01-24_22_47_59

そうするとDwvToolsの画面に新しい領域が表示され「Changes」タブが現れます。
変更点がハイライトされています。

色の違い

変更前の箇所:赤
変更後の箇所:緑

書き換える前、書き換えた後が比較して表示されます。

行番号

行番号も変更前後で確認できます。

変更前の列:左
変更後の列:右

まとめ

変更前後の確認と列番号の確認もできるので履歴的に見るのにはとても便利ですね。「Changes」タブのの変更した記述をクリックするとCSSの該当箇所を黄色くハイライトしてくれりので更に見つけやすくなります。

ぜひ試してみてください。

他にもGoogleChromeの使い方をいくつか記事で紹介していますので、ご確認ください。

広告

広告

このエントリーをはてなブックマークに追加

-Web/Design/Creative
-, , , ,

執筆者:

関連記事

Multiple Paste and Go 画面イメージ

コピーした複数のURLを別々のタブで開いてくれるアドオン Multiple Paste and Go:Firefox アドオン

Google ChromeのPastyと同様にコピーした複数のURLを別々のタブで開いてくれるFirefoxのアドオンです。 使い方 複数のURLをコピーしたあとに以下の方法で複数タブで開いてくれます …

スクリーンキャプチャ LightShot:Google Chrome アドオン

ブラウザの画面をキャプチャしてくれる機能拡張 Lightshot 範囲選択後のサイズ調整ができ、ボタンも選択範囲の近くにあるので使いやすい。 ただ、Fireshopのようにウェブ画面全体のキャプチャは …

GoogleドキュメントでWordPressの下書き保存ができるアドオン

Googleドキュメントの音声入力を試してみたくてGoogleドキュメントに原稿を書いてワードプレスアプリ(Mac)に貼り付けてみたら、Googleドキュメントでワードプレスの原稿が書けるとアナウンス …

Tile tabsがver57以降ではサポートされない:Firefoxアドオン

以前から使っていた1つのウィンドウに複数のタブの中身を画面分割して表示できる機能拡張「Tile tabs」がfirefox自体のアップデートにより機能拡張の仕様が変わったため、今回Ver.56で警告が …

Googleデータポータルでアクセスレポートが超捗る

Googleアナリティクスはサイトのアクセス解析としてはとても優秀です。アクセス解析ツールのスタンダードとして多くの方に利用されています。 ただ、分析をするにはちょっとコツが必要だったり、機能が多すぎ …

検索

サイドAD02

AD