happiness (^_^) (^_^) (^_^) (^_^) (^_^) (^_^) (^_^) (^_^) (^_^) (^_^) (^_^) (^_^) happiness

トップ > chromeDevelopperTool > chrome developer toolでDOMの階層構造を一気にコピーする

chrome developer toolでDOMの階層構造を一気にコピーする

chromeDevelopperTool

なんか忘れてたのでメモ

  1. developer toolを開く
  2. 指定のDOMを選択
  3. Copyを選択
  4. Copy selectorを選択

以下のようにCSSで使える形で全部取れる(以下はtwitterのフォロワー数の部分)

#react-root > div > div > div.css-1dbjc4n.r-18u37iz.r-13qz1uu.r-417010 > main > div > div > div > div > div > div:nth-child(2) > div > div > div:nth-child(1) > div > div:nth-child(5) > div:nth-child(2) > a > span.css-901oao.css-16my406.r-1tl8opc.r-vw2c0b.r-ad9z0x.r-bcqeeo.r-qvutc0 > span

どうでもいい思ったこと

ちょっとしたchrome拡張機能やTempermonkeyするときに拡張したいwebページでreact使われていてうわーってなった。

TODO

react使われているときのDOMの操作の方法を習得する