Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 本記事は、bytefish氏による「Use Chrome DevTools Like a Senior Frontend Developer」(2020年7月21日公開)の和訳を、著者の許可を得て掲載しているものです。 シニアフロントエンド開発者みたいにChromeデベロッパーツールを使おう 開発環境にChromeを選ぶなら知っておきたい12のテクニック Photo by Morning Brew on Unsplash さて、何らかの理由で、開発ブラウザとしてChromeを選んだとします。次は、デベロッパーツールを開き、コードのデバッ
最近Chrome DevToolsについて調べていて発見した便利機能を紹介します。 誰もが使える最高便利な開発マシンChrome DevToolsを使いこなして開発体験を変えましょう! 1. $0で選択中のDOM要素の取得 特定の要素に何かしたいという時には、要素のIDやclassを確認してConsoleでdocument.querySelector("#xxx")で取得するというのが一般的だと思います。実はそれはカーソル選択と$0で代替できます。 Classや、IDがついていない特定のDOMを取得したい時とかにも使えるので地味に便利です。 手順 カーソルで取得したい要素を選ぶ Consoleタブで$0を入力 最近知ったChrome DevToolsの便利機能① $0 での選択中のDOM要素取得 Elementsタブで選択状態のDOM要素は、Console上で $0 を入力することで取得で
pͪoͣnͬpͣoͥnͭpͣa͡inͥの作り方 ぽんぽんぺいんを簡単に作るサイトを作ったのでよかったら使ってみてください。 【ここをクリック】 ponponpain(haraita-i)とは 画像でいうとこんなやつのこと。 今回参考にさせていただきましたが、以下のサイトによくまとまっていると思います。 不思議な文字 pͪoͣnͬpͣoͥnͭpͣa͡inͥ | bison's brain at postachio ぽんぽんぺいん ‐ 通信用語の基礎知識 まあ要するに、不思議な上付き文字を組み合わせて、文字に副題(ルビ)をふろうって感じの遊びのことで、昔流行ったみたいです。 今回はクリックだけで上付き文字を加えられるサイトを作ったのでぜひみんなに遊んでほしいなと思っています。 投稿について UbuntuのChromeだと綺麗に表示されないのですが、Twitterだといい感じになるみたいです。
結果はどうなったでしょうか。 自分が今使っているGoogle Chromeだとこうなりました。 結果は{a: 10}というオブジェクトです。まあ、これは当然ですね。3 + 5と入力すれば実行されて8が返ってくるのですから、{a: 10}というオブジェクトリテラルを書けば{a: 10}というオブジェクトが作られるのは当然です。 ……。 ここで、一部の人は「おいふざけんなよ」と思っているかもしれません。というのも、この例は環境によっては違う結果になるのです。具体的には、Chrome以外2のブラウザのREPL(FirefoxやEdgeなど)が該当します。あと、ts-nodeのREPLも該当するらしいです。これらの環境では、結果は{a: 10}ではなく次のようになります。 オブジェクトを作ったはずなのに結果が10とか意味不明ですね。そもそも、こんな簡単なプログラムで結果が全然違うとか、JavaSc
・ タブ系 ・ command + t ... 新規タブを開く ・ command + ← ... 左のタブに移動する ・ command + → ... 右のタブに移動する ・ 画面分割系 ・ command + d ... 垂直画面分割 ・ command + shift + d ... 水平画面分割 ・ option + command + (↑ or ↓ or ← or →) ... 矢印の位置の分割画面に移動する ・ 便利系 * optionボタンを押しながらクリックする ... カーソル移動 Skitch 必須レベル チャット上で、仕様を確認したり、発生した問題などを伝えたい時に便利なアプリです。 キャプチャした画面に対して、説明用に線を引いたり、矢印を付けたり、文字を書いたりできます。 skitch を起動しっぱなしにしていなくても、command + shift + 5 を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く