Mapping に代わるネットワークリソースの永続化機能 ― Chrome Canary DevTools のローカルオーバーライドを使用可能にする

なにも年末に色々変えなくたっていいのに・・・とボヤいてみたくなるハナシ。

注意 !!

今日(2018年 1月20日) 確認したところ、Sources パネルに Local Overrides タブがデフォルトで表示されるようになっている。
なので、以下の内容はすべて昔話になった。ただし Chrome Canary では思いがけないことが結構頻繁(ひんぱん)に起きるので、油断はできない。

11月 7日付けの前回の記事で、Chrome Canary DevTools の新機能 Local Overrides(ローカルオーバーライド)を紹介したが、12月 5日付けの注意事項として、その新機能が使えなくなっていることを追加報告した(※)

その時点では ノーマル版の Chrome の Mapping(マッピング)が使用できていたが、今日(12月27日)チェックしてみると、Chrome Ver 63.0.3239.108 では既にそれも使用不可になっていた。マッピングの舞台となる Workspace は Network タブから Filesystem タブに移動し、マッピング自体はすべて無効になった。この状況はバグレポート 774823 で報告した内容とまったく同じだ。

つまり従来のマッピングを活用していた人は、今後は  local host 上に開発用ウェブサイトを構築して Filesystem タブを利用するか、または Chrome Canary DevTools のローカルオーバーライド機能が利用可能になるのを待つかの、二者択一を迫られることになったということだ。…このページを読む

Google Chrome Canary の DevTools に JavaScript が簡単にデバッグできるローカルオーバーライド機能(Local Overrides)が追加された

Google Chrome Canary の DevTools バグレポートを提出したら大きなボーナスが・・・!

 

始めに:

追記:(2017/12/28)

ここで紹介する Local Overrides をめぐる状況は 12月に入ってから色々と変わっている。概略は「Mapping に代わるネットワークリソースの永続化機能」を参考にして頂きたい。

この記事は前回の続きだ。

ただし引く継ぐのはバグレポートの件で、ここでは chromium のコメンテータから代替案として示された Google Chrome Canary(Chrome Canary)の DevTools の Local Overrides(ローカルオーバーライド)機能について説明する。

バグレポートで「今まで使っていたマッピングが使えなくなった」ということを報告した訳だが ―― バグとしては認められたようだ ―― それを提出しなかったら、 ローカルオーバーライドの使い方を独力で突き止めるのに、もっと長い時間がかかっただろう。

それどころか、まともに取り組まなかった可能性すらある(注1)。ちょと文法的にアレな英文レポートを一個提出しただけなのに、その見返りは思っていた以上に価値のあるものになった。…このページを読む

ある日突然英語でレポートを書くはめに・・・サビついた英作文技法をリフレッシュする【Chrome 翻訳】

Google Chrome Canary のバグレポートを提出したのが始まり・・・。

 

はじめに:

まず最初にこの図を見て頂きたい。

Chrome Canary 【検証】 の Workspace 設定画面

これは久しぶりに Chrome Canary で local host 上のサイトの JavaScript を編集しようとした時に、Chrome のデベロッパーツール【検証】 の Workspace 設定画面に表示された内容だ。10月 14日のことだ。

赤枠で囲っているのがバグレポート記入画面のリンクで、これが「ある日突然英語でレポートを書くはめに」なった事態のスタートボタンだ。…このページを読む

dynabook T552/58GKD の過熱保護機能が作動したので、CPU 冷却ファンを掃除したら効果てきめんだった

観測史上例のない酷暑が続いた 7 月の出来事・・・。

 

始めに:

TV ニュースで「観測史上例がない」と言っていた酷暑が続いた、 7 月初めのある日の真夜中の話だ。

その頃取り組んでいた課題の解決にめどが立ったので、あとは軽くマージャンゲームをやってから寝てしまおう ―― とゲームを起動して一打目を打った瞬間、パチンという音とともに dynabook T552/58GKD(Dynabook) の液晶画面が真っ暗になってしまった。

そこから数秒間・・・「修理代はいくらかかる?」とか「買い換えなら中古もアリか」とかいう考えが頭の中を駆け巡ったが、10 秒ほど経ったとき「あっ!サーマルか」という言葉が頭に浮かんだ。…このページを読む

Twenty Fourteen の子テーマ作成例【右サイドバー仕様の 2 カラムレイアウト】- CSS、functions.php および java script 編

レイアウトのチューニングは時間がかかる。でも見た目のインパクトは小さくて少し悲しい・・・。

前回は、WordPress のテーマ Twenty Fourteen の子クラス Twenty Fourteen Child(2014 Child)の作成例のうち、レイアウトの概要とテンプレートについて説明した。今回は functions.php や CSS などのコード類について説明する。今回の作成例が一つのテストということもあって、CSS 以外のコードはあえて複雑にしている部分があるので、その点をあらかじめ頭の片隅に入れておいて頂きたい。…このページを読む

Twenty Fourteen の子テーマ作成例【右サイドバー仕様の 2 カラムレイアウト】- サンプルとテンプレート編

Twenty Fourteen の full-width.php と single.php を少し書き換えて、Twenty Sixteen 固定ページ風の 2 カラムレイアウトを実現する。

始めに:

今回は 、WordPress のテーマ Twenty Fourteen のテンプレートを少し書き換えて、同じ WordPress のテーマ Twenty Sixteen 風の 2 カラムレイアウトを実装した子クラス、Twenty Fourteen Child(以下「2014 Child」)の作成例を報告する。

2014 Child では、新規に作成したファイルと部分的に改編したファイルが合計 8 本あるので、説明はある程度まとめてやってしまうつもりでいる。代わりにダウンロード可能なサンプルを用意したので、不足分はそれを参考にして頂きたい。サンプルは【3)ファイル構成とレイアウトの実例】に置いてある。…このページを読む

WordPress ― プラグインの組み合わせでプレビューができなくなった件

高機能なプラグインは気難しい?・・・Jonradio Multiple Themes と Crayon Syntax Highlighter の仲を取り持つのは不可能だ。

一年以上休んでいたブログを再開したら、早々に幾つかのトラブルに見舞われることになった。そのひとつ目、Chrome のデベロッパーツール【検証】の CSS のマッピングの件は、どうやら前々回の方法で解決したんじゃないかと思っている。

表題の件はその記事を書いている途中で気が付いたことだ。

気が付いたこと:

WordPress のプラグイン Jonradio Multiple Themes を有効にした状態で Crayon Syntax Highlighter を使用すると、その投稿 ―― または固定ページのプレビューができなくなる

最初は Syntax Highlighter が唯一の原因と思い、他のコード表示用プラグインを二つほど試してみたが、これが帯に短しなんとやらで中々満足できるものが見つからない。…このページを読む

Chrome のデベロッパーツール【検証】でローカルに保存した CSS ファイルを使う ― Workspace の追加と CSS ファイルのマッピング

CSS ファイルのマッピングはとても便利だ 。でも、作業開始位置には注意が必用だ!

 

はじめに:

注意!

ここで説明している Chrome DevTools のマッピング機能は 2017年12月に削除されたため、local host 上のウェブサイトを Filesystem タブ上で開発する場合を除いて、この記事の内容はほとんど無効になった

マッピングに代わる Local Overrides(ローカルオーバーライド)機能が、Chrome Canary DevTools にインプリメントされている。
外部サーバー上のウェブサイトを開発する場合は、Overrides タブ上でこの機能を使うと良い。ローカルオーバーライドの設定と使い方については、次の記事を参考にして頂きたい。

追記:(2018/03/08)

参考記事リストの末尾の記事は 2018年 2月28日の投稿だ。
この中で通常版の Chrome DevTools でもローカルオーバーライドが使用可能になったことを報告しているが、今のところリストの先頭の記事に書いてある設定が必要条件になっている。これもいずれアップデートにより変わるものと予測しているが、今はとりあえずその設定を参考にして頂きたい。

参考記事:

最近ちょっと理由があって、固定ページのレイアウトを『Twenty Fourteen を使って Twenty Sixteen ライクに』する計画を立てていた。

で、この記事を書きながら、そちらの方を ―― マッピング活用の実地研修を兼ねて ―― 色々いじっていたら、思いのほか短時間でテスト運用ができるまで仕上がってしまった。

今は、そのスタイルを【VST プラグイン関連のメモ帳】の 3 本のページに適用して様子を見ている。サブタイトルには、その時に、複数の CSS を処理しようとして混乱してしまった自分自身への反省の意が込められている。…このページを読む

Chrome のデベロッパーツール【検証】と WordPress は相性が悪いのか? ― WordPress Ver 4.8 で CSS ファイルのマッピングができなくなった件

今までできていた事が突然できなくなるのは、良い気持ちがしない ―― ということ・・・WordPress での実例。

はじめに:

注意!

ここで説明している Chrome DevTools のマッピング機能は 2017年12月に廃止されたため、この記事の内容は全面的に無効になった。

マッピングに代わる Local Overrides(ローカルオーバーライド)機能が、Chrome Canary DevTools にインプリメントされている。この機能の使い方については下のリンクを参考にして頂きたい。
ただ、Chrome Canary では今後何が起きるかわからないので、私自身は今でもこの記事の設定を継続している。

参考記事:

去年の 4月 11日の記事「Chrome のデベロッパーツールでサンプル CSS を・・・以下省略」の追記(今年 5月 28日付け)で、通常の Chrome では実行できなくなったサーバーとクライアント側(local)の CSS ファイルのマッピングは、 Google Chrome Canary では実行可能である云々・・・と書いた。

ところがだ・・・その追記からひと月も経たないうちに、Chrome Canary でもマッピングができない事案が発生していたので、とても驚いた。

この問題はこれから説明する解決方法で片付いたのだが、思いがけない付録まで付いてきた。どういう訳か、通常の Google Chrome でも再びマッピングができるようになっていたのだ!いったい何が起きているのだろう・・・?

これは WordPress のテーマ Twenty Fourteen の子テーマを作ろうと思い立った時の話だ。…このページを読む

Chrome のデベロッパーツール【検証】でアクション疑似クラスを作成する ― div 要素の【展開/折り畳み】もそれなりには・・・

アクション疑似クラスを作ってみる ―― WordPress での実例。

はじめに:

この章では、第 1 章で作ったクラス型スタイルを利用して、アクション疑似クラス型スタイル(アクション疑似クラス)を作ってみる。

応用例では、div 要素のアコーディオン的な【展開/折り畳み】を、WordPress では順必須の簡単なショートコードと、幾つかのスタイルを組み合わせることで実現している。

そのサンプルコード中では、クラス型、ID 型、要素型の各スタイルをあえて混在させてあるので、そこをいじると動作がどう変わるのか ―― または変わらないのか、ということを各位ご自分で試してみて頂きたい。…このページを読む

年をとっても出来ることはある・・・例えばDTMだって!