Chrome Devtoolのmonitorを使うと関数の呼び出しを観察できて便利 - ぱすたけ日記
を読んで思い出したのでご紹介です。 元の記事と同様に以下の関数 sum について、 function sum(nums, acc = 0) { console.log({ nums, acc }); if (nums.length === 0) return 0; if (nums.length === 1) return nums[0]; return sum(nums.slice(1), acc + nums[0]); } この関数sumの引数 (nums と acc) の呼び出しごとの変化を見たい場合は、所謂プリントデバッグや debugger を使うのは一般的なテクニックとしてよく知られていますが、このような関数呼び出し時の引数を知りたい場合はmonitor(function)という関数を使うことで同様の効果を得ることが出来ます。 この場合は monitor(sum)とした後に、関
Payment Request API のよくある誤解を解く
このポストは Chromium Browser Advent Calendar 2017 の 12/8 分です。先日 Medium に投稿した英語版を翻訳し、日本向けに若干加筆したものになります。 Payment Request API が登場してからというもの、おかげさまで非常に多くの方に興味を持っていただいています。一方、その複雑さから勘違いや、誤った情報を元に盛り上がってしまっているような状況が起きています。この記事では、みなさんの反応を見ている中でよくある誤解を解き、正確な情報を提供しようと思います。 そもそも Payment Request API が何かご存じないという方は、まずここから読んでいただくと良いと思います。 Web Payment API? Chrome Payment API? Google Payment API? # すべて間違いです。正しくは "Paymen
文書校正ツール textlint の Chrome 拡張を作った - もなでぃっく
以前、プラグインで拡張可能な文章校正ツール textlint で小説の作法を検証するための規則を作ったのですが、textlint はコマンドラインツールであるために利用するまでのハードルが高い状況でした。 Sublime Text や Atom などのプログラマ向けエディタを利用していれば、textlint のプラグインが使えたりするのですが、今回はより簡単に利用できるように Chrome の拡張機能として textlint をブラウザ上で使えるようにしてみました。 インストールはこちら: 【Chrome ウェブストア】 textlint: 文章チェッカー インストールすると、ページ内の編集領域で文章入力中にリアルタイムで校正してくれるようになります。（もちろん ON/OFF できます） textlint に最近追加された自動修正機能にも対応しているので、ボタン一発で自動で修正されたりしま
Chrome開発者ツールの小技集 | POSTD
最近、普段以上にChromeの開発者ツールを使うことに時間をかける機会がありました。その過程で、自分が今まで気づいていなかった機能をいくつか見つけました（少なくとも今までその機能を探す必要に迫られていなかった、とも言えるのですが。例えばブラックボックス化や非同期のスタックトレースなど）。そのため、開発者ツールでとても気に入っているいくつかの機能についてまとめてみたくなったのです。 小さな虫眼鏡ののアイコンは、特定の要素やCSSプロパティに対して、「どのCSSファイルに書かれているどのセレクタ/クラスが最終的なスタイルを決めているか」を示してくれます。例えば、どれかDOM要素に対して「要素を検証」を選び、右側の「Computed」というタブを選びます。確認したいCSSプロパティを見つけてその虫眼鏡アイコンをクリックすることで、すぐさま右側に正しいCSSファイル内のクラス/セレクタを表示してく
Chrome DevToolsを使ってJavaScriptのメモリリークを検出し、解消する - 人生dat落ち
JavaScriptを書いていたらブラウザがくっそ重くなる症状に出くわした。あぁ、噂のメモリリークですわ。 先人の知恵に頼るマン。それっぽい記事が見つかる。 javascriptのメモリリーク対策(随時更新) - Qiita Shibu’s Diary: JavaScriptのメモリリークを10倍速で発見する Taming The Unicorn: Easing JavaScript Memory Profiling In Chrome DevTools Writing Fast, Memory-Efficient JavaScript - Smashing Magazine angularjs - How to catch memory leaks in an Angular application? - Stack Overflow 上の記事はProfiles + Take Heap
自作Chrome extension紹介 #pixiv_engineering_talks
自己紹介 @kyo_ago Scala, TypeScript, LocalProxy, ApplicationCache Chrome apps, extension合わせて20個くらい作成
Debugging asynchronous JavaScript with Chrome DevTools | Blog | Chrome for Developers
Introduction A powerful feature that makes JavaScript unique is its ability to work asynchronously via callback functions. Assigning async callbacks let you write event-driven code but it also makes tracking down bugs a hair pulling experience since the JavaScript is not executing in a linear fashion. Luckily, now in Chrome DevTools, you can view the full call stack of asynchronous JavaScript call
pepper.js
What is it? pepper.js is a JavaScript library that enables the compilation of native Pepper applications into JavaScript using Emscripten. This allows the simultaneous deployment of native code on the web both as a Portable Native Client (PNaCl) executable and as JavaScript. Native Pepper applications can now be run in Chrome, Firefox, Internet Explorer, Safari, and more. See it in action! Why use
Chrome DevToolsを使いこなすための参考サイトまとめ | 1 pixel｜サイバーエージェント公式クリエイターズブログ
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 フロントエンドエンジニアの谷です。 本記事ではGoogle Chromeの開発者ツール、Chrome DevToolsを使いこなすために参考になるサイト、ページの紹介をします。 すでに多くのフロントエンドエンジニアが開発で使っているかもしれませんが、「要素のインスペクタなどの基本的な機能しか使っていない」「UA切り替えくらいしかつかってない」というような方や、そもそもほとんど使ったことがない、という方もこれらを参考にフロントエンド開発を効率化していきましょう！ 基本的な使い方 Chrome DevTools Overview 基本はやはり公式ドキュメ
Klepto proxy by kyo-ago
Kleptoとは？ JavaScript, CSSの開発者向けのLocal Proxyです。 何ができるの？ 現在以下の機能が実装されています。 通信内容の閲覧（network list） 通信内容の差し替え（auto responder） Chrome developer tools上で書き換えた内容のローカルファイルへの反映（auto save） ローカルファイルが更新された場合にブラウザをリロード（auto reload） （注 現在Windows環境では「通信内容の閲覧」と「通信内容の差し替え」が正しく行えません） 動作環境 MacOSX版Chrome version 25以上（2013/03/01の安定版最新） 現在Windows環境では「network list」と「auto responder」が動作しません（1ページ通信するとそれ以上通信できなくなる） 「auto save
HTML5, WebStorage, WebSQL memo - latest log
WebStorage, WebSQL の実装寄りの脳内ダンプ。乱文。あとで gist に移動して消す。 WebStorage(LocalStorage) は、IE8+, Chrome, Safari, Opera, Firefox で利用可能。 WebSQL は、MobileSafari, Chrome, Safari で利用可能。iOS 4.3.x では一部問題がある。 WebStorage の内部文字コードはUTF-16 *1。 WebSQLの内部文字コードはUTF-16 *2。 UTF-16で保存されている場合は1文字で2byte使用する。JavaScript の文字コードも内部は UTF-16。 WebStorage で保存する文字列にNULL文字(0x0000)が含まれていると、一見保存できているように見えるが、実は保存できていない。サスペンド/レジューム, キャッシュアウト,
The Future of JavaScript – take a peek today!
$200K 1 10th birthday 4 abusive ads 1 abusive notifications 2 accessibility 3 ad blockers 1 ad blocking 2 advanced capabilities 1 android 2 anti abuse 1 anti-deception 1 background periodic sync 1 badging 1 benchmarks 1 beta 83 better ads standards 1 billing 1 birthday 4 blink 2 browser 2 browser interoperability 1 bundles 1 capabilities 6 capable web 1 cds 1 cds18 2 cds2018 1 chrome 35 chrome 81
webRequest APIをざっくり理解する。(あるいはChrome拡張の作り方) – mzsm.me
昨日2月9日、Google Chrome 17の安定版がリリースされました。 このバージョンでの変更点の一つに、webRequest APIが正式に実装されたことがあります。 これまでこのAPIはexperimental(実験的機能)として実装されていましたが、今回晴れて正式なものになりました。 このAPIを使うと、Chromeが行う通信を監視して通信があるたびにイベントを実行したり、HTTPヘッダを書き換えたりすることができます。 Chrome 17では、User-Agentを他のブラウザに偽装することができる機能がDeveloper Toolsに付いたのですが、その機能もこのAPIを利用して実装されてい(ると思われ)ます。(Developer Tools自体もJavaScriptによって実装された“Webアプリ”なので、多分そのはずです) HTTPヘッダをいじれるというと不安に思われる
Chromeのconsole.logの謎 - はなちん C-x C-c
この記事を読んで、Chromeのconsole.logの動きが謎すぎる気がして確認してみました。 CoffeeScriptで、newするときのプロパティ変数の初期化ってどーなってんの？ - uzullaがブログ 検証 ソースコード var a = []; a.push('A'); console.log(a); a.push('A'); console.log(a); これをChromeのDeveloper toolのコンソールで実行してみました。 期待する出力 ["A"] ["A", "A"] 実際の出力 ["A", "A"] ["A", "A"] 調べてみた console.log lazy等でググるとStackoverflow等のサイトがでてきた。 Is Chrome's JavaScript console lazy about evaluating arrays? - Stack
Google ChromeをWebSocketで制御する - 箱入りあじゃらの日記
JavaScriptJavaScript Advent Calendar 2011 (Node.js/WebSocketsコース)の6日目。初参加です、緊張します。WebSocketネタということで、ChromeのWebKit Remote Debugging Protocolを使ってWebSocketでGoogle Chromeを操作する小ネタ。手順1.リモートデバッグを有効にしてChromeを起動Chromeの起動オプションに--remmote-debugging-portを付加してリモートデバッグを有効にする。 $ chrome --remote-debugging-port=9222 2.タブ一覧を取得今回はコントロールする側(Chrome)とされる側(node)が同一ホストで動いてるものとします。http://localhost:9222/jsonをGETで叩くとChromeのタ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - GoogleChromeLabs/comlink: Comlink makes WebWorkers enjoyable.
GitHub - dunxrion/console.image
GitHub - cyrus-and/chrome-har-capturer: Capture HAR files from a Chrome instance
Google Chrome Developer Tools入門 in DevFestX Sapporo
chrome-life.com
