ワンコンテンツ

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
-, , , ,

執筆者:

関連記事

シークレットモード 開き方:Google Chrome

GoogleChromeには閲覧履歴や入力したフォームの内容を記録しないシークレットモードがあります。 例えば他の人のパソコンを使わせてもらってSNSやWEBメールを閲覧するなど、記録を残して置きたく …

Firefoxに搭載されたスクリーンショット機能はイマイチ物足りなさを感じさせる

Firefoxで以前からアナウンスがあったとおり最新のバージョンアップ(Ver.56)においてスクリーンキャプチャ機能(以下、Screendshots)が標準機能として追加されました。 使ってみた感想 …

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

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

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

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

万能画像閲覧ソフト irfanViewがおすすめ:windowsだけよ

先日発表されたiOS11では画像の圧縮方式が変更され、データサイズは軽くなりましたが互換性に難ありな状態なので、対応していないソフトでは表示できない現象が起きてしまったそうです。 世の中には他にも画像 …

検索

サイドAD02

AD