グーグルがChrome DevToolsの学習ビデオを公開。DOM操作からプロファイリング、メモリリークの発見まで詳しく学べる

2013年3月29日

グーグルは、WebブラウザのChromeに搭載されているデベロッパーツールの詳しい使い方をオンラインで学習できるサイト「Discover DevTools」の公開をブログで明らかにしました

fig

学習内容は全部で以下の7つのレベルに分かれており、17本のビデオと、レベルごとに用意された、実際に自分で操作して解いてみる75以上の例題から構成されています。レベルをクリアするとバッジがもらえるようになっています。

Level 1: Getting Started & Basic DOM and Styles
Level 2: Advanced DOM and Styles
Level 3: Working With the Console
Level 4: Debugging JavaScript
Level 5: Improving Network Performance
Level 6: Improving Performance
Level 7: Memory Profiling

DOM操作からメモリリークの発見まで

紹介ビデオからいくつかポイントを抜き出してみました。DOM操作などは多くの人が使っている機能だと思います。

fig

コンソール画面の使い方は、JavaScriptプログラマなら便利に使えると思うので、ぜひ学んでおきたいところ。

fig

JavaScript用デバッガ。ブレークポイントやステップ実行や変数のウォッチなども、使いこなせると開発効率が大きく向上しそうです。

fig

プロファイリングによってボトルネックを発見し、性能を向上させる方法の解説。大きな規模のWebアプリケーションではツールがないと難しいですね。

fig

メモリリークを発見し修正する方法など。この画面は実行ごとに使用メモリが増えている様子。これもツールがなければ相当困難になるので、ぜひ学んでおきたいものです。

fig

ただし、中身はすべて英語ですので、英語の勉強も兼ねて試してみてはいかがでしょうか。

Tags: JavaScript Web技術 開発ツール Chrome Google

このエントリーをはてなブックマークに追加
ツイート
follow us in feedly





タグクラウド

クラウド / AWS / Azure / Google Cloud
コンテナ / Docker / Kubernetes
クラウドネイティブ / サーバレス
クラウド障害 / 運用・監視

プログラミング言語 / 開発ツール
JavaScript / Java / .NET / WebAssembly
HTML/CSS / Web標準

アジャイル開発 / スクラム / DevOps / CI/CD
ソフトウェアテスト・品質
ローコード/ノーコード開発

データベース / RDB / NoSQL / 機械学習・AI
Oracle Database / MySQL / PostgreSQL
Office / 業務アプリケーション

ネットワーク / HTTP / QUIC / セキュリティ
OS / Windows / Linux / VMware
ハードウェア / サーバ / ストレージ

業界動向 / 働き方 / 給与・年収
編集後記 / 殿堂入り / おもしろ

全てのタグを見る

Blogger in Chief

photo of jniino

Junichi Niino(jniino)
IT系の雑誌編集者、オンラインメディア発行人を経て独立。2009年にPublickeyを開始しました。
詳しいプロフィール

Publickeyの新着情報をチェックしませんか?
Twitterで : @Publickey
Facebookで : Publickeyのページ
RSSリーダーで : Feed

最新記事10本