WorkFlowyのCSS要素の確認の仕方

MacのWorkflowyアプリの仕様を想定

ブラウザ版でも基本的には同じ

その1.開発者画面を開く

command + opition + i （あるいはメニューの「View→Toogle Developer Tools）

その2.Elementsタブを開く

https://gyazo.com/844473cd0ac37549aef2e31a7648e9e3

その3.目標のElementを探す

タブの一番左にある矢印のアイコンを押した後、Workflowyの画面で求めている要素をクリックする

例1.通常の要素

https://gyazo.com/462ec6a050405ac2d2d8d910c42d07e3

クリックするとHTML上の位置が中央に、当たっているCSSが右に表示される

CSSを上書きする場合は、右の画面からそれっぽいものを探す

例2.動的な要素

ハイライトしたときに出てくるメニューといったものはその操作をしないと出てこないので、実際にそれをやってみる

https://gyazo.com/80c17975e4682fe1f0592d7d07ef04b6

こうしてみると何が新しく生成されているのかがわかりやすい