![http://buchineko.website/chrome-devtools-cording/](https://cdn-ak-scissors.b.st-hatena.com/image/square/79a6d16d5c2100b9f50a70f1d2ff0b798e464420/height=288;version=1;width=512/http%3A%2F%2Fbuchineko.website%2Fwp-content%2Fuploads%2F2016%2F03%2Fthumb.png)
はじめに 昨今のWebブラウザはどのような機能があるのか把握するのも大変なほど多機能で便利ですよね。 Webブラウザの機能を把握してうまく使いこなせること(とくに開発者ツール)が、フロントエンドエンジニアの前提スキルになってきてるのかなぁと感じる今日この頃です。 ということで自分のデフォルトの開発用ブラウザはChromeなのですが、これを覚えて捗ったなぁということをメモしていこうと思います。 思い浮かんだら追記していこうと思っているのでストックして頂けると幸いです。 基本系 キーボードショートカットを覚える Chromeのキーボードショートカットの一覧 キーボードで出来ることはなるべくキーボードでやるけれども、マウスやトラックパッドでやったほうが速い場合は臨機応変に切替えることを心がけています。 Chrome Canaryを使う Chromeの開発者向けプレビュー版 Chrome Cana
Web開発をする上で色々なテキストエディタやIDEがあり、開発環境は人それぞれかと思います。そんな中、今回はChromeの拡張機能を使ってChromeのみでのrails開発をご紹介したいと思います。 今回はMac 10.9上で行っています。 開発環境の構築 では早速始めます。chromeおよびruby,railsは既にインストール済み(※1)の前提で進めたいと思います。 ※1 使用したバージョンは以下になります。 chorme 35.0.1916.153 ruby 2.1.1p76 rails 4.1.0 Terminalを動かせるようにしよう まずrailsでの開発の場合、コマンドが実行できないと効率が悪いと思いますのでTerminalを動かせるようにしたいと思います。今回使用するのはDevtools terminalです。 Devtools Terminalをインストールします。Dev
DevTools、使ってますか? もはやChromeじゃないと開発できないくらいに飼い慣らされています。 ブレークポイントやconsole.logなど基本的な使い方から、TimelineとAuditsを使ってのパフォーマンス計測などなど、DevToolsのポテンシャルは計り知れません。 個人的にはConsole APIが好きなんですが、今回はConsoleパネルで使える Command Line API の使い方についてまとめてみました。 $_ $_には最後に評価した式の結果が保存されています。 Console上で計算を行なった場合や、$セレクタなどでDOMを検索した結果など、最後の結果が常に保存されます。 $0 〜 $4 $0から$4にはElementsパネルで選択した要素が5つ保存されています。$0が最後に選択した要素で数字が増えるごとに過去に選択した要素になります。 $0は特に使いや
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く