DevTools上でesbuildするChrome拡張を書いた - 詩と創作・思索のひろば
社内ではドキュメントの共有に Scrapbox が活発に使われており、するといきおい UserCSS や UserScript もさかんである。具体的には、/customize という共有のプロジェクトがあってみんなの自慢の装飾やカスタマイズが共有されている。これを個々人で import して使うんである。 こんな感じ。 自分の場合は /motemen/UserCSS/common に常に適用したいスタイルを書いておいて各プロジェクトから読み込んでいる。このページからさらに、共有プロジェクトや他人の個人プロジェクトページからよさそうな設定を import している次第。 つまりは多段インポート。こういうことを続けていると、だんだんと読み込みの遅さが気になってくる。こういうのはバンドルすればいいのだけど、巷のツールを普通に使うことはできない。インポートしてるリソースに認証がかかっているからだ
Google Chrome 61で追加されたscroll-behaviorを考える | フロントエンドBlog | ミツエーリンクス
2017年9月26日 Google Chrome 61で追加されたscroll-behaviorを考える UI開発者 泉口 9月21日にStable ChannelのGoogle Chromeがバージョン61にアップデートされました。 Webサイト開発において嬉しい機能はwindow.visualViewportによるビューポートの数値取得や、<script type="module">によるJavaScriptモジュールのネイティブサポート、JavaScriptからAndroidネイティブアプリへのURL共有が可能になるWeb Share APIなどがありますが、Chrome 61ではWebアプリケーションからUSBデバイスを直接操作するWebUSB APIが搭載され、外部デバイスの操作までできるとなると、もはやブラウザの範囲を超えた印象を持ちます。 今回はscroll-behavior
ChromeのヘッドレスモードをMacOSXで試してみた - Qiita
マストドンで盛り上がる最中、 こっそり一部で盛り上がってたChromeのヘッドレスモード MacOSXで少し試してみたいと思います。 開発中の機能ということで、仕様の変更もあると思いますが、2017/4/16段階ではちゃんと以下のやり方で動作してます:) 準備 Google Chrome Canaryをインストール 開発段階にある機能がのってるchromeです。ささっと入れちゃいます。 nodejsインストール(v6.3以上) ちなみに今回試したのはv7.9.0 シェルにCanaryバイナリへのエイリアスを作成します(僕は.zshrcに追加しました/bashの人は.bash_profileかな) alias chrome-c='/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary'
オープンソースのエディタ「Visual Studio Code」がChromeブラウザのデバッガプロトコルに対応。エディタから直接デバッグ可能に
オープンソースのエディタ「Visual Studio Code」がChromeブラウザのデバッガプロトコルに対応。エディタから直接デバッグ可能に マイクロソフトがオープンソースで公開している「Visual Studio Code」が、Chromeブラウザのデバッガプロトコルに対応したことが発表されました。 Visual Studio Codeのエディタ画面から、Chromeブラウザで実行しているJavaScriptのブレークポイントの設定と実行と停止、変数の参照などが可能になります。 JavaScriptのSoruce Map機能も働くため、圧縮済みのコードを実行しても自動的にVisual Studio Code上の圧縮前のJavaScriptコードに対応してそのままデバッグ可能。また同様の仕組みのおかげでTypeScriptのコードもVisual Studio Code上でそのままデバッ
初心者がモチベーション上げながらプログラミングをしてシューティング（っぽい）ゲームを1本作る！ - Λlisue's blog
KawazAdventCalendar - Github 紹介ページ（動作サンプルあり） はじめに この記事はKawaz Advent Calendar 2014 のクリスマスの記事として書かれました。 この記事は「初心者がモチベーション上げながらプログラミングをしてシューティング（っぽい）ゲームを1本作る！」 という目標の元書かれています。 この目的のために、以下のような方針を打ち立てました。 インストールが難しい言語はご法度（例 C/C++ や Java など） 可能な限りプログラミング以外の部分のイザコザをなくす（Pythonの文字コード論外） Windows および Mac で共に同じように動作すること（.net framework vs Mono 論外） 「仕組み」の理解に重点を置くためフレームワークなどは一切使用しない（ああいう のは内部を知っている人が使うべきものです） つま
フロントエンドエンジニアになってから11ヶ月間で覚えたちょっと捗るChromeの使い方 - Qiita
はじめに 昨今のWebブラウザはどのような機能があるのか把握するのも大変なほど多機能で便利ですよね。 Webブラウザの機能を把握してうまく使いこなせること（とくに開発者ツール）が、フロントエンドエンジニアの前提スキルになってきてるのかなぁと感じる今日この頃です。 ということで自分のデフォルトの開発用ブラウザはChromeなのですが、これを覚えて捗ったなぁということをメモしていこうと思います。 思い浮かんだら追記していこうと思っているのでストックして頂けると幸いです。 基本系 キーボードショートカットを覚える Chromeのキーボードショートカットの一覧 キーボードで出来ることはなるべくキーボードでやるけれども、マウスやトラックパッドでやったほうが速い場合は臨機応変に切替えることを心がけています。 Chrome Canaryを使う Chromeの開発者向けプレビュー版 Chrome Cana
Google Chromeの開発者が語るこれからのWebに必要なこと、ちょっとした懸念点とか - ふろしき Blog
ｰｰｰｰ HTML5はネタが出尽くした。あとは、IE8やAndroid2.X標準ブラウザのような、レガシーブラウザがいなくなればいいだけではないか？ 私は最近、そんな言葉を耳にすることがあるのです。しかし、ブラウザ開発者たちは未だに、そんなことを微塵も感じさせないほど働いています。まだまだ進化の速度を、落とすわけにはいかないようです。2014年06月14日に開催された「HTML5 Night」にて、Google Chromeの開発者である及川卓也氏の口から、これからのChrome開発について語られました。 本記事では、及川氏の講演のダイジェストをお届けします。 今のChromeには何が不足しているのか？ Chromeは2013年の4月に大事な出来事がありました。Appleと一緒に開発していた、「WebKit」をフォークしました。それが、Chroniumと同様なオープンソースのレンダリングエ
使われているコードのチェックもできる！Google製のJavaScriptカバレッジツール·ScriptCover MOONGIFT
ScriptCoverはGoogle製のJavaScriptカバレッジテストツールです。任意のWebサイトに対してテストできます。 Googleが開発したJavaScriptのカバレッジツールがScriptCoverです。Google Chrome機能拡張としてインストールすることで任意のWebサイトにおけるJavaScriptカバレッジ率が分かります。 インストールしたところです。パッケージは提供されていないようなので自分でコンパイルしてインストールする必要があります。 任意のWebページを見るとこうやってカバレッジ率が出ます。 クリックすると分析開始です。しばらく待ちます。 完了しました。JavaScriptなので実行状況によってカバレッジ率も変化するようです。 さらに詳細なスクリプト単位でのカバレッジ率も見られます。 See full coverage reportをクリックするとス
Framework-agnostic, micro-library for getting stack traces in all web browsers
Framework-agnostic, micro-library for getting stack traces in all web browsers DownloadBookmarkletGetting StartedGitHub/IssuesLicenseUsageJust include stacktrace.js and call printStackTrace()!<script type="text/javascript" src="path/to/stacktrace.js" /> <script type="text/javascript"> // ... your code ... if (errorCondition) { var trace = printStackTrace(); alert(trace.join(' -> ')); //Output howe
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JSのパフォーマンスをお手軽に解析する方法 - Qiita