【2019年4月版】JavaScriptのconsoleがすごいことになってた。 - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
さよなら、Firebug | POSTD
最も人気が高くパワフルなWeb開発ツール。 Firebugはこれまでに驚異的な成功を収めており、その12年の歴史において、オープンソースのツールとして、Web開発者の間でカルト的な人気を築き上げてきました。登場したのは2005年、Firefoxブラウザでコードの検査、編集、デバッグをできるようにした最初のツールです。また、どのようなWebページにおいても、CSS、HTML、JavaScriptの調査を可能にしています。これは大きな前進でした。 Firebugは多くの人の注目を集め、現在でも100万人以上の熱心なファンがそれを使用しています。 そのような中、来月リリースされるFirefox Quantum (バージョン57) で、Firebugが終焉を迎えるのは残念でなりません。ただし、現在のFirefox Developer ToolsにFirebugの全ての機能が盛り込まれている点につい
JavaScriptでWebRTCやるための基礎知識 - console.lealog();
未来の自分のためのメモです。 仕事でやってないせいですぐ忘れるし、都度思い出すの大変なので・・。 ただまぁだいたいの人はSkyWayとかEasyRTCとか何かしらのライブラリを使うはずで、そういう人たちにはあまり関係ない内容かも。 生のjsでWebRTCを書くときに、先に知っておきたかった系のメモです。 素人ではないがベテランでもない、そんな微妙な知識レベルだと思います。 まだ枯れた仕様ではないので、記事を読む時は日付に注意してください... WebRTC is 何 WebでRealTimeCommunicationできる仕様 もといクライアントどうしでP2Pで通信できる仕様やそのAPI群 See WebRTC Home | WebRTC 仕様まわり WebRTC 1.0: Real-time Communication Between Browsers Identifiers for W
"デバッグしてください", "パフォーマンスチューニングしてもらってもいいですか?" とJavaScriptが難読化された状態のページのURLを渡してくる人に、伝えなきゃならない事がある - latest log
webpackを使ったサイト、極端にデバッグしずらい (外部ライブラリが eval(文字列) の形で埋め込まれる)ので、はっきり言って大キライだったりする— コラーゲンたっぷりさん (@uupaa) 2017年4月19日 見知らぬコードが minifyされ、さらに eval されているのをデバッグしろとか、暴力にも等しい要求なんだよね。そりゃキライになるよ— コラーゲンたっぷりさん (@uupaa) 2017年4月19日 「環境Aの言語Bで書かれたコードを言語Fに変換した、環境C/D/Eで動くと思うのでデバッグしろ」というのも極端にデバッグしづらいという理由から避けるようにしている。 デバッガビリティに問題がある環境は、心がすり減るのでイヤ(時給1万円なら頑張る— コラーゲンたっぷりさん (@uupaa) 2017年4月19日 js minifyあるある A「パフォーマンスに問題があるので
60 (フレーム・パー・) セカンズ：Pinterestの描画パフォーマンス最適化のケーススタディ | POSTD
今日はWebサイトやWebアプリの描画パフォーマンスをどう改善したらいいのか、ということについて取り上げようと思います。私たちWeb開発者にとって、この分野は比較的新しく注目し始めたエリアで、 ユーザエンゲージメントとユーザ体験 に影響があるため重要です。 フレームレートはWebにも影響がある フレームレートとは、 連続した イメージを端末がスクリーンに映し出すレートのことです。秒間フレーム数（FPS）が低ければ肉眼で個別のフレームを判別でき、FPSの数値が高ければユーザにとっては反応が速いと感じられます。ゲーム業界ではおなじみの概念となっているものですが、Webにも当てはまるのです。 長時間に及ぶイメージのデコード、不必要なイメージのリサイズ、重いアニメーションとデータ処理はすべてフレーム落ちを起こす可能性があり、結果としてフレームレートは下がり、jankが多いページになってしまいます。
ep17 Service Worker | mozaic.fm
Theme 第 17 回のテーマは Service Worker です。 今回は @kinu さんと @nhiroki\_ さんをお迎えして、今実装や仕様策定が進んでいる Service Worker について、なぜこうした仕様が出てきたのか、これを用いて何ができるのか、これがどう Web を変えるのか。 実装や仕様の裏話や、これが普及してからの懸念点なども含めて、じっくり議論しました。 また、Service Worker へのフィードバックは bug tracker (基本は英語ですが、日本語でも良いそうです)、もしくは #serviceworker です。 Show Note 関連仕様 ServiceWorker AppCache Push API Notifications API Fetch Permissions API Service Worker の始まり(0:00) Ser
安藤日記 [&] WebGL Performance Tuning
安藤日記 安藤日記：デジタルガジェット好き「安藤幸央」の日々のメモ ( yukio.andoh@gmail.com ) [ http://twitter.com/yukio_andoh ] Design Sprint Newsletter https://designsprint.substack.com/ ( via. Behind the magic of AKQA Winterlands ) #WebGL Performance Tuning WebGLコンテンツ／プログラムの速度をコツコツと速くするための、 パフォーマンスチューニング観点をまとめました。 まずはプロファイリングが重要。 闇雲にチューニングしても、あまり速くならない場合もあります。 また、最初の設計や、ハードウェア性能を知った上でのデータ量の見積もりも重要です。 ■WebGLプロファイリングのコツ ●グラフィックスパ
JavaScriptのデバッグ方法 – JSを嫌いにならないためのTips | POSTD
この記事のオリジナルは voxxed に投稿されたものです。 JavaScript関連の問題を抱えるチームをサポートする仕事を通じて、いくつか共通の問題点があることに気づきました。もしあなたもJavaScriptに対するイライラを感じているのであれば、この記事は何らかの助けになるかもしれません。おことわり：私がお教えするヒントはすでにご存知のものもあるとは思いますが、うまくいけば、多少なりとも有用な情報があるかもしれません。特にエンタープライズアプリケーションやCMSソリューションを構築する際に有効なヒントです。チームの誰もが話したがらないCMSのコードについてお話しします。いずれも必要に応じて採用できるものです。 debuggerステートメント 大半のブラウザでサポートされているにもかかわらず、JavaScriptを書く際に最も活用しきれていない機能の1つです。debuggerステートメ
FlaskをJSから叩いてエラーになった時に対話的デバッグする方法 - 西尾泰和のはてなダイアリー
WebアプリフレームワークのFlask(が内部で使っているWerkzeug)は、デバッグモードをONにしておくとエラーが起きた時にそのエラー画面からブラウザ上で対話的にコードを実行したり変数を表示させたりしてデバッグが出来る。これは超便利。なのだけど、最近JSからAPIを叩くケースが多くなって、その場合JSが予期しないHTMLを受け取ってパースに失敗するだけなので折角の対話的デバッグが生かせない。 そこで、エラー時には新しいwindowを開いて、レスポンスの内容をそちらに書き出すようにした。初回だけポップアップブロックが発動してしまうけど、それ以降はこれでAPIでも対話的デバッグが出来る。 $.ajax({ url:'/buggy/', data: 'q=42', success: function(x){console.log(x)}, error:function(x){ var w
Shibu's Diary: JavaScriptのメモリリークを10倍速で発見する
渋日記@shibu.jp 渋川よしきの日記です。ソフトウェア開発とか、ライフハックを中心に記事を書いていきます。 メモリリーク。一言でプログラマを死に追いやる恐怖の言葉。C/C++の世界ではmallocしたのにfreeしないとかのケアレスミスでよく起きていた問題です。その後、ガベージコレクタが掃除してくれるプログラミング言語が増え、一部の言語で循環参照に気をつけるぐらいであまり気にしなくても良い的な風潮になっています。 というものの、そうとも言ってられなくない状況も増えてきています。クラウドのスケールアウトブームも一段落というかコモディティ化し、go言語で再び性能向上方面に関心が寄せられたり、日本でErlangの勉強会が満席になったり、スケールアウトから再びスケールアップ方面に話題が移りつつあるのを感じます。長時間稼働のサーバで、スケールアップしてさらに数多くのリクエストを大量に受けるよう
隠れていたNode.jsの4バイトメモリリーク、Walmart問題の解決 - ぼちぼち日記
この記事は、 Node.js Advent Calendar 2013 - Adventar の12日目です。 1. ありがとう Ben Nodeの情報に普段アンテナを張っている人は既にご存じでしょうが、Nodeコア開発の中心的エンジニア Ben Noordhuis がNodeのコアチームから離れました。Node.jsの公式ブログに「Ben Noordhuis's Departure」としてアナウンスされています。 なぜ彼がNodeの開発を止めなければならなかったのかその経緯をここで述べることは控えますが、彼のこれまでの貢献なしでは今のNodeは存在し得なかった、と言えるほど彼は重要な存在でした。Benは、Nodeやlibuvのコードの開発だけでなく、github の issue の回答やPRのレビュー、 MLの質問の返答などNodeコミュニティにも精力的に対応し、去年来日した isaac
The JavaScript console API
In most JavaScript engines, there is a global object console with methods for logging and debugging. That object is not part of the language proper, but has become a de facto standard, since being pioneered by the Firebug debugger. Since their main purpose is debugging, the console methods will most frequently be used during development and rarely in deployed code. This blog post gives an overview
jQuery 1.9 のソースマップ対応で圧縮版でもデバッグが簡単になった話
jQuery 1.9 がリリースされました。1.9 の新機能の中ではあまり注目されていませんが、ソースマップに対応したのが地味に便利そうです。 というのも、圧縮版の jquery.min.js を使っていると 何か問題が起きたときにスタックトレースを眺めても jQuery の部分が意味不明 デバッガーで jQuery のソースにステップインしても意味不明 といった理由で、開発中には非圧縮の jquery.js を使うことが多かったわけです。 それが、1.9 からはソースマップに対応したので圧縮版のままでのデバッグが簡単になってます。 超簡単な使い方 ソースマップに対応したブラウザーは現時点では Google Chrome のみなので、Google Chrome の手順を説明します。 (Firefox はソースマップへの対応を計画中らしい) 事前準備を忘れずに Google Chrome で
JavaScript::DebugScreen
デバッグに役立つかもしれないライブラリ 公開 : 2006-01-15 更新 : 2006-01-16 License : Same as Perl See also : http://www.bigbold.com/snippets/user/ma.la サンプル ダイアログはダブルクリックで消えます。 Firefoxだとeval系の行番号が正確に出ません 伝家の宝刀 Null またはオブジェクトではありません IEだと外部jsファイルのエラーを補足できません 使い方 debug.js debug.css ie_xmlhttp.js ファイルを保存してheadタグの中にこんな感じで貼り付ける。 <link rel="stylesheet" href="debug.css"> <script type="text/javascript" src="ie_xmlhttp.js"></scri
Chrome DevTools.next
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
iOS6のSafariでサポートされるHTML5の機能 | DevelopersIO
以前、HTML5でカメラやGPSなどスマートフォンならではの機能がどこまで使えるのか調べました。 最近、iPhone5を買ったので今度はiOS6のSafariでサポートされたHTML5の機能を試して見ようと思います。 試したのは以下の5つです。iPhoneで確認できるようにサンプルを作ったので試してみて下さい。 ファイルアクセス(File API)とカメラ(HTML Media Capture) 音声処理・合成(Web Audio API) アニメーション(Animation Timing API) CSS Filter Effects Remote Debugger ■ファイルアクセス(File API)とカメラ(HTML Media Capture) ファイルアクセスとカメラ連携のサンプルです。iOS6ではFile APIの書き方でカメラも使えました。 [ファイルを選択]ボタンを押すと
JavaScript デバッグツール で $x で XPath セレクタ使えるのがいつの間にかメジャーになっていた
最近 Web 開発とかクロスブラウザ対応みたいなことから遠のいているので今更感ありそうだけれど、AutoPagerize の siteinfo を気まぐれに書いてたら $x で XPath セレクタ使えるのが定番化してたのを今知った。調べたのは Windows 7 のみ。 Firefox 13.01 Webコンソール ○ Firebug ○ Opera 12.00 Dragonfly ○ Google Chrom 19 デベロッパーツール ○ Internet Explorer 9 開発者ツール × 対応状況は上のような感じだった。Safari はめんどいので入れてないけど多分使えるんじゃないですかね。調べてみたものの、XPath セレクタは Web 開発にそんな大事というわけでもない(どうなんでしょう)と思うし、色々なブラウザのデバッグツールで使えるといってもその利点も特に大きくなさそう
メモリ使用量を改善し便利な開発ツールを追加した Firefox の最新ベータ版を公開しました | Mozilla Japan ブログ
Windows、Mac、Linux に対応する Firefox の最新ベータ版 をテスト用に公開しました。今回のベータ版では、メモリ使用量を最適化して Web をより快適に利用できるようにするとともに、驚くような Web 体験を簡単に構築できるようにする 数多くの開発者向け機能 を追加しました。 ユーザ向けの主な新機能メモリ使用量の改善: アドオンによるメモリ使用量を最適化し、より快適なブラウジング体験を提供します。これは Mozilla の開発者が取り組んできた MemShrink と呼ばれるプロジェクトの成果です。アドオンを使っているときや長時間ブラウザを起動しているときに、メモリの使用量がこれまでより少なくなっていることに気付くでしょう。PDF のネイティブ対応: プラグインを使用せずブラウザ内で直接 PDF を表示することが可能になりました。この機能はまだ実験段階にあるため、試して
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WebIDE、ストレージインスペクタ、jQuery イベント、iframe 切り替えなど – Firefox 開発ツール エピソード 34
getEventListeners(node) - hogehoge @teramako
