JSで想定外に画面遷移するとき、消えてしまうログを残してデバッグする（ひとり DevTools Advent Calendar 2020 – 20日目） | Ginpen.com
20 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 ログ類は画面や DevTools を再読み込みすると全部消えちゃいます。普通はそれでいいけど、画面移動直前の様子を知りたい場合には不便です。 そんなときは Preserve log をオンしておくと記録が残るようになります。Console パネルと Network パネルで利用できます。 コンソールのログを残す Console パネルを開く Console パネル右上のコンソールの設定ボタンを押し、設定欄を開く “Preserve log” のチェックを入れる これで、例えば beforeunload イベントとか pagehide イベントとか、そういうイベントでの処理のログも残るようになります。 const eventLogger = (event) => console.lo
CSSじゃなくて実際にレンダリングで使われるフォントの調べ方（ひとり DevTools Advent Calendar 2020 – 11日目） | Ginpen.com
11 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 CSS の font-family はフォント名を複数指定して、このフォントがなかったら次、みたいにすることができます。また serif のような、環境に依存する緩い指定である総称フォントファミリー (generic font family) もあります。 CSS で何のフォントが指定されているかは Elements パネルのスタイル欄に出ていますが、最終的にどのフォントが利用されているのかというのも、実はパネル内で見つけることができます。 たくさん並んでるけど結局今見えてるのどれ？ 指定したやつちゃんと利いてる？ フォールバックになってない？ みたいなときに。 利用されているフォント名を探す Elements パネル → Computed を開く 一番下 Rendered Fon
Chromeの新機能CSS Overviewがすごく便利！ページに使用しているCSSの概要や未使用の宣言がすぐ分かる
Chromeに新しく実装された「CSS Overview」が非常に便利なので、紹介します。 表示しているページのCSSの概要、カラー、フォント、メディアクエリ、未使用の宣言が一覧でき、制作したページの検証やスタイルガイドとしても役立ちます。 Chromeの新機能「CSS Overview」 Fyi: New in Chrome: CSS Overview Chromeの新機能「CSS Overview」の準備 Chromeの新機能「CSS Overview」の使い方 Chromeの新機能「CSS Overview」の準備 まずは、Chrome デベロッパーツールを開き、右上の歯車アイコン（Settings）をクリックします。
Gatsby - Markdown×Reactによる静的サイトジェネレータ MOONGIFT
静的サイトを作る時にはコンテンツを作ってリロードして表示を確認するのが基本です。その時、ライブリロードのような仕組みを使っていても基本は変わりません。SPA（シングルページアプリケーション）であれば一番上まで戻ってしまうでしょう。確認がだんだん面倒になっていくはずです。 そこで使ってみたいのがGatsbyです。Markdown + Reactを使った静的サイトジェネレータです。 Gatsbyの使い方 Gatsbyのインストールはnpmでできます。 npm install -g gatsby インストールしたらまずサイトのベースを生成します。 $ gatsby new my-test-gatsby-site 07 Sep 08:00:44 - log: Cloning git repo "git://github.com/gatsbyjs/gatsby-starter-default.git
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
