ファイルが更新されないときのキャッシュの消し方いろいろ（ひとり DevTools Advent Calendar 2020 – 17日目） | Ginpen.com
17 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 ちょっとここおかしいな簡単だからさらりと修正しちゃおうよしほら終わったコミットだデプロイだ、ええとでも反映されないなおかしいな？ そんな経験あると思うんですが、キャッシュって厄介ですよね。DevTools を使ってどうにか強制的に最新版へ更新したりできます。 先にまとめ Network パネルの Disable cache を使おう それはそれとしてキャッシュ戦略うまくやろう キャッシュを利用しているかの確認 Network パネルでリクエストを監視して、一覧の Size の項目に出てきます。 “(disk cache)” がブラウザーが保存していたキャッシュファイルを利用した場合です。ネットワークを利用しませんでした。また再読み込みのときに “(memory cache)” にな
Chrome・Safari・Firefoxで比較！クリエイティブ表現のレベルアップに使える最新ブラウザーの開発者機能（パフォーマンス編） - ICS MEDIA
Chrome・Safari・Firefoxで比較 クリエイティブ表現のレベルアップに使える最新ブラウザーの開発者機能（パフォーマンス編） この記事は『Chrome・Safari・Firefoxで比較！クリエイティブ表現のレベルアップに使える最新ブラウザの開発者機能』の後編になります。 前編ではブラウザーの開発者ツールがJavaScriptやCSSのコーディング・デバッグだけではなく、もっとクリエイティブな領域でも活用できることを示しました。アニメーションのリプレイやイージングの編集など、すぐに使える機能がたくさんあることをお伝えできたと思います。 後編ではもう一歩踏み込んで、アニメーションやインタラクションのパフォーマンス改善に使える開発者ツールの機能を紹介します。パフォーマンスについてはどのブラウザーもとても力を入れているので、開発者ツールも自ずと高機能です。 ブラウザーのレンダリングプ
Chrome・Safari・Firefoxで比較！クリエイティブ表現のレベルアップに使える最新ブラウザーの開発者機能（前編） - ICS MEDIA
どのブラウザーでも、アニメーションのパネルを開いている状態で画面を操作すると、発生したトランジション・アニメーションが自動的に記録されます。記録したアニメーションはもう一度ゆっくり再生したり、対象の要素やスタイルを調べたりすることもできます。 ChromeのAnimationsパネルの特徴 Chromeの場合、検出されたトランジションやアニメーションはトリガーが同じもので自動的にグループ化され、グループの単位で詳細を見たり再生したりが可能です。また、アニメーションのタイミングや長さをドラッグで調整する機能もあります。 Firefoxのアニメーションパネルの特徴 Firefoxのアニメーションパネルはインスペクターの一部になっているので、要素を絞り込んでこの要素に適用されているトランジション・アニメーションだけを表示できます。また、色のトランジション・アニメーションの場合、タイムラインが色の
ウェブ制作に便利な各ブラウザの開発ツール「キャッシュ無効化」機能
コードを書いて、ブラウザでチェックして… 画像を書き出して、ブラウザでチェックして…という作業をしていて、ブラウザのキャッシュが残っていて困ったことってありませんか？ そんな時に便利なのが開発ツールのキャッシュ無効化機能です。Firefox、Chrome、Safari、Microsoft Edgeのそれぞれの開発ツールに搭載されている機能です。ちょっとしたことなんですけど、知っているのとそうでないのとでは作業効率がだいぶ変わってくるんですよね。 以下、各ブラウザの開発ツールで設定を変える方法です。 Firefoxの開発ツールのキャッシュ無効化 Firefoxの開発ツールで「ネットワーク」タブを開くと「キャッシュを無効化」というオプションがあります。ここにチェックを入れるとツールボックスが開いている時はキャッシュが無効化されます。 開発ツールの設定からオプションを変更する 開発ツールの設定画
Grammarly （グラマリー）でスペルミスを一掃！無料の英文校正ツールを使ってみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。英会話スクール「MeRISE英会話上野校 by LIG」の運営をしているみおです！ スクール運営業務の中で、５人の外国人の先生たちと英語でコミュニケーションをとることもしばしば。 先生にチャットで要件を伝える際に、英文がきちんとした英語になっているのかを必ずチェックしています。 そこで、最近「Grammarly」という文章校正ツールを使い始め、英文のチェックがとっても楽になったので今回は実際に使ってみた感想を書こうと思います。 以前、LIG社員のモトキウエダさんが「Grammarly」の紹介記事を書いていますので、Grammarlyについて知らない方はこちらをご一読ください。 Grammarlyってどうやって使うの？ Grammarlyの使用方法は主に3つです。 Grammarlyのサイトへ直接アクセスして使用する Chromeなどの拡張機能を利用する GrammarlyをPC
jdetects - 開発者ツールが開いたのを検知 MOONGIFT
昔、HTMLソースの中に秘密のメッセージを埋め込むのが流行りました。例えば求人を入れていたり、問題を書いておくといった具合です。当たり前のことですが、開発者ツールを開くのは開発者くらいです。だからこそ良い宣伝になったのです。 そんな特徴を使って遊べるのがjdetectsです。開発者ツールを開いたタイミングでイベントを実行できます。 jdetectsの使い方 jdetectsのイベント設定です。 jdetects.create(function(status) { document.querySelector("#devtool-status").innerHTML = status; }); 開いていない状態です。 開いたタイミングでCSSのプロパティを変更しています。 jdetectsはGoogle Chromeだけでなく、Safariなどでもイベントが発火します。コンソールにメッセージ
デベロッパーツールの賢い使い方！テキストが多い少ないで崩れないかなど、デザインの検証や調整方法のまとめ
CSSについてあまり詳しくないデザイナーでも、デザインのさまざまな検証や調整ができるデベロッパーツールの使い方を紹介します。 テキストや要素が多い少ないでコンテンツのデザインが崩れないか、要素のデザインを簡単に比較したり、画像や要素のカラーを一括で変更したりなど、制作にすぐに役立つものばかりです。 Using DevTools to Tweak Designs in the Browser 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 要素に与えられたclassを切り替える コンテンツの量でデザインが崩れないかテストする 指定した要素を非表示にする デザイン要素のスクリーンショット デザインのカラーを変更する CSSの変数を使用する（カスタムCSSプロパティ） 「filter: invert();」で要素のカラーを反転する C
bitwarden - Webブラウザ/スマートフォンに対応したパスワード管理 MOONGIFT
今のコンピュータにおいてパスワード管理は必須です。多くのWebサイトがパスワード管理されていますし、セキュリティを考えるにパスワードの使い回しは避けるべきです。現状、管理ソフトウェアの選択肢はとても多いです。 もしこれから探していこうというのであればbitwardenを使ってみてはいかがでしょうか。 bitwardenの使い方 bitwardenは多数のブラウザ、スマートフォンに対応しています。こちらはGoogle機能拡張です。 サイトを追加します。 追加する画面です。 ユーザID、パスワードにワンクリックでアクセスできるのは便利です。 こちらはiPhoneアプリです。Android版もあります。 使い勝手はWebブラウザ版と変わりません。 Safariの拡張にも対応しています。 bitwardenはサーバからWebブラウザ、スマートフォンまですべてオープンソース、とされているのですがライ
CloudyTabs - iOSで開いているサイト一覧を表示
Mac OSXとiOSはAppleが開発しているだけに相性がいいようにできています。特にデータや情報の受け渡しにおいて、スムーズにできるように設計されています。 Mac OSXまたはiOSのSafariでブラウジング中にもう片方の環境で閲覧したいと思った時にはタブの情報が受け渡せるようになっています。CloudyTabsを使うとMac OSXからより簡単にブラウジング情報にアクセスできるようになります。 CloudyTabsの使い方 CloudyTabsを起動したところです。メニューバーに常駐します。 このようにiOSデバイスの名前と、表示しているタブの情報が分かります。複数のiOSデバイスを開いていれば、並んで表示されます。ここから選べば、標準で使っているブラウザで開けます。ブラウジングがとても簡単になりますね。 CloudyTabsはMac OSX用、MIT Licenseのオープンソ
無料でiPhone標準ブラウザから広告を消して快適ブラウジングが可能になる「F-Secure ADBLOCKER」
PCでウェブブラウジングしている際は特に気にならなかった広告が、画面の小さなスマートフォンではとにかく気になって仕方がない、という人も多いはず。しかし、Adblock BrowserやDisconnectなどの「広告を削除してくれるウェブブラウザアプリ」を使用すると、いつも使っているブラウザとは異なる使用感に四苦八苦したりブックマークを移動させるのが面倒だったりするので、結局ブラウザを乗換えるには至らなかったりします。そんな時に役立つのが「F-Secure ADBLOCKER」で、iOSの標準ブラウザである「Safari」に簡単に広告ブロック機能を追加することができるので、いつものブラウザで広告フリーの快適ブラウジングが楽しめるようになります。 F-Secure AdBlocker | 広告をブロック Web ページをより高速に読み込む https://www.f-secure.com/j
Googleの新メールアプリ「Inbox」がiPad・Androidタブレット・Firefox・Safariに対応したので使ってみました
大量のメールを効率的に処理できるように開発されたGoogleの新メールアプリ「Inbox」が、新たにiPadやAndroidタブレットのタブレット表示に対応し、さらにこれまでChromeだけだったブラウザ版もFirefoxとSafariに対応したので、さっそく使ってみました。 Official Gmail Blog: Inbox by Gmail: now in more places http://gmailblog.blogspot.jp/2015/02/inbox-by-gmail-now-in-more-places.html Inboxがどんなメールアプリなのかは以下の記事を見ればよく分かります。なお、Inboxは招待制なので、事前に「[email protected]」に空メールを送信して招待コードの発行を申し込んでおく必要があります。 Gmailをさらに強化して山ほど届くメー
無料でIE・Chrome・Firefox・Safariでブックマークを同期できる「Xmarks」
Google Chromeではそのブラウザでのみブックマークを同期することが可能ですが、「Xmarks」では無料でInternet ExplorerとGoogle Chromeのブックマークの同期といったように、異なるブラウザでブックマークの同期ができます。また、ブックマークのバックアップとリストア、タブのリモートアクセスが可能です。 Internet ExplorerとGoogle Chromeを使ったブックマークの同期は以下から。 Xmarks | Bookmark Sync and Search http://www.xmarks.com/ 今回はInternet Explorerをブックマークの同期元として使ってみます。上記サイトの「INSTALL NOW」をクリック。 ここではInternet Explorer用のものをダウンロード。 ダウンロードしたインストーラーを実行します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
