console.log() の代わりにdevtoolsのLogpointsを使う - Qiita
Logpointsを使おう Webフロントエンドの開発をする際、デバッグ目的で「特定の処理が実行された」ということを確認するために console.log() を使うことは多いと思います。しかし、Google Chrome や Microsoft Edge で利用可能な Logpoints を利用することで、 console.log() を使わずともコンソールにメッセージを出力することが可能です。 なぜLogpointsを使うの？ Logpoints を使うのには以下のメリットがあります。 デバッグや動作確認のためにコードを変更する必要が無い console.log() を誤ってcommitに含めてしまう心配が無い console.log() を入れた後に再ビルドやホットリロードを待つ必要が無い どうやってLogpointsを使うの？ logpoints は以下のように使用します。 Chr
Next.js製アプリケーションのコンパイルを約100倍高速化した話
Next.jsアプリケーションの開発時においてコンパイルが長時間に及ぶ問題が起きていたので、その原因を特定した手法と採用した解決策について記載します。 今回は結果的にコンパイル時間を100倍以上高速化することができました。 前提 今回の対応は以下のバージョンで行いました。 React@18.2.0 next@12.2.4 tailwindcss@3.2.4 postcss@8.4.14 Next.js の開発中に、コンパイル時間が長くなっていることに気づく 最近、Next.jsアプリケーションのローカル開発時に待ち時間が長くて生産性が低いのでなんとかしたい、という相談を受け、調査を開始しました。 まず、おもむろにyarn devでプロセスを立ち上げてみたところ、以下のようなコンパイル時間を示すログが表示されました。 yarn dev yarn run v1.22.19 $ next dev
今すぐJavaScriptデバッグ効率を上げるconsoleテクニック - Qiita
こちらの記事は、2019年9月に公開されたIndrek Lasn氏による『Boost your JavaScript Debugging Skills With These Console Tricks』の和訳になります。 本記事は原著者から許可を得た上で記事を公開しています。 著者Twitter https://twitter.com/lasnindrek JavaScriptにはコードをデバッグするためのツールがたくさんあります。 JavaScriptコードをデバッグするお決まりの方法といえば、コンソールから結果を出力するだけのconsole.logメソッドを使うことでしょう。 十分に機能はしますが、デバッグに最適とまでは言えません。これよりもっと良い方法があれば、試してみたいと思いませんか？ consoleオブジェクトを使えば、ブラウザのデバッグコンソールへのアクセスすることができま
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
2012年のJavaScript～PCからモバイルの時代へ | gihyo.jp
あけましておめでとうございます。一昨年、昨年に引き続き、今年も昨年のJavaScriptを振り返りつつ、JavaScriptの近い未来についてちょっとだけお話させて頂きます。 それでは早速、昨年の予想を振り返りつつ、最近までのJavaScript界隈の動きを振り返ってみましょう。 2011年のJavaScript界隈でのニュース 昨年の記事で私は2011年はウェブアプリの普及に向けて、JavaScriptの開発環境とテスト環境がキーになると書きました。まずはこの2つの視点から見てみましょう。 JavaScriptの開発環境 2011年のJavaScriptの開発環境に関する大きなニュースといえば、Ruby on Railsの3.1にCoffeeScriptがデフォルトで採用されたという一件があります。Railsは非常に人気の高いウェブアプリケーションフレームワークで、多くのフレームワークに
マネーニュース2ch
まず、iPhoneのSafariでどこでも良いのでページを開いてブックマークしましょう。 そして「How to use Firebug on your iPad and iPhone」に書かれているJavaScriptをコピーします。 javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);E=new%20Image;E[r]('src',I+L);})
Selfkleptomaniac — 【Titanium Advent Calendar 2011：18日目】Titanium MobileでAndroid
そこで、リリースの際はTitanium Mobileのソースコードに手を入れて、直接動画プレーヤが起動するように変更して対応していたのですが、その後モジュールが書けることがわかったので、今ではMIMEタイプを渡すと適当なIntentが起動するこちらのモジュールを使って回避しています。とっても簡単なものなので、PDFビューワなどにも応用できると思います。 いずれにせよ、Android案件ではこんな苦労はしょっちゅうです。また、特に困るのがUI設計の問題です。例えばiOSでは上の画像みたいにナビゲーションバーが表示されて、その左側には何もしなくても戻るボタンがあり、また必要に応じて画面下部にタブを表示する、みたいな画面設計になるのが一般的なのですが、Androidだとナビゲーションバーというものは存在せず、タブも画面上部に並んでしまうので、どう転んでもiOSと同じものにはなりません。Andro
Zombie.js : Insanely fast, headless full-stack testing using Node.js
Insanely fast, full-stack, headless browser testing using node.js View the Project on GitHub Download ZIP File Download TAR Ball View On GitHub Zombie.js Insanely fast, headless full-stack testing using Node.js Zombie 6.x is tested to work with Node 8 or later. If you need to use Node 6, consider using Zombie 5.x. The Bite If you’re going to write an insanely fast, headless browser, how can you no
Javascriptの開発手法について社内でプレゼンしました — Aduca
About this Entry Javascriptの開発手法について社内でプレゼンしました was posted on 5月 18th, 2011 at 1.23pm and is filed under Programming. This entry has no comments (yet). You can follow any responses through the RSS 2.0 Feed. Recent Post Javascriptの開発手法について社内でプレゼンしました Javascriptが難しくてわからないので誰か教えてください Nerineを作り直したい話 新宿にて配信の記録 機材購入 Category livestream non-category Programming thinking Meta ログイン 投稿の RSS コメントの RSS Wor
JavaScriptのデバッグTips - os0x.blog
JavaScript Advent Calendar 2010 8日目担当のid:os0xです。 JavaScriptネタは案外範囲が広くて色んなネタがあるので、毎回が楽しみですね。 さて、私はデバッグをネタにしたいと思います。テストではなくデバッグです。誰かが書いたコードをメンテナンスしなきゃー、とか。jQueryプラグイン導入しようとしたけど、なんかうまく動かないーみたいなケースのおはなしです。 JavaScriptのデバッグは大変なので、多くの方が日々苦労されていると思います。なぜJavaScriptのデバッグが大変なのか少し整理してみましょう。 ブラウザ依存 まず、なんといってもJavaScriptはウェブブラウザ上で実行されるので、環境が一定ではありません。特定の環境だけを対象にJavaScriptを書くことは滅多にありません。PC向けではIE、Firefox、Chrome、Sa
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
twitter の console.log() エラーよけ - てっく煮ブログ
javascript, twitterFirebug が導入した console.log() は最近のブラウザで標準的に実装されつつあります。しかし、万が一、リリースコードに console.log が混じり込んでしまうと、古いブラウザや開発ツールが導入されていないブラウザで JavaScript エラーになってしまってとても悲しくなります。ということで、そういう場合にエラーを出さないようにするために、お手製の偽者 console オブジェクトを実装するテクニックがあります。ちょっと検索するといろいろ見つかります。 if (!window.console){ window.console = { log: function(){} }; } 確かに小さなプロジェクトでは、こういうおまじないを書いておくと安心だろうなー…と思っていたら、twitter のソースコードに次のようなコードを発見。
さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料 - 川o・-・）＜2nd life
本日行われた Shibuya.js の発表資料をアップしました。 さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料 View more presentations from hotchpotch JS のテスティングフレームワークのおおざっぱな説明や JavaScript テストにおける問題、それについての解決方法の一つ、CUI でのテスト、Envjs、エンドツーエンドテストにおける JS / Ajax のテスト、終わりにちらっと Phantomjs の話があります。 スライドの最後にあるように、やはりまだコレだ！という JS のテスティングフレームワークは存在しなく、今後 JS のテストは『僕らが書きたいテスト』をどれだけ簡単に書ける・書く手法が確立されるかによって流行廃りは決まってくるんじゃないかなぁ、と思ってます。そのうちの一つがスライ
拡張機能デバッグインターフェイス
拡張機能開発時によく使うログや表明 (assertion) などのためのインターフェイスのサンプルコードです var myextension = { // debug interface debug: { // https://developer.mozilla.org/en/NsIConsoleService _consoleservice: Components.classes["@mozilla.org/consoleservice;1"].getService(Components.interfaces.nsIConsoleService), _Cc_scripterror: Components.classes["@mozilla.org/scripterror;1"], _Ci_scripterror: Components.interfaces.nsIScriptError,
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Quick Debug using || with console.log
Quick Debug Wth Console Log Using Or Operator | SamanthaMing.com
ユーザのブラウザで起きた JavaScript のエラーを収集する - Qiita
Adobe製のJavaScriptデバッガTheseusがすごい - Qiita
Learn web development | web.dev
作業効率が10倍アップする Chrome Developer Tools の使い方 - はてブロ@ama_ch
