VS Codeの中でブラウザーを開いてCSS開発（ひとり DevTools Advent Calendar 2020 – 22日目） | Ginpen.com
22 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 VS Code はウェブ開発に便利だな～、いっそブラウザーのタブも表示できないかな～、そう考えのあなたに朗報です。できます。 題名のとおり MS Edge を使うんだけど、macOS など Edge を導入していない場合は Chrome で代用できます。 デモプロジェクト よければこちらご利用ください。昨日のに追加しました。サーバーは npm run start ないし node server.js で起動します。 ginpei/vscode-debug-web-demo 本記事に沿って設定するか、あるいは .vscode.example/ を .vscode/ へコピーすればすぐデバッグ開始できます。 Microsoft Edge Tools で VS Code 内にブラウザーの
VS Codeの中でJavaScript/Node.jsのデバッグまでする（ひとり DevTools Advent Calendar 2020 – 21日目） | Ginpen.com
21 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 Chrome DevTools を使ってクライアント側に限らずサーバー側もデバッグできるんですが、それはそれとして開発中はエディターで開いたソースコードと行ったり来たりするのが面倒です。 VS Code なら Chrome DevTools （の機能）と連携して、エディター内でブレイクポイントを設置するなどできます。ちなみに DevTools の画面は今回出てきません。 先にまとめ サーバー側もクライアント側も VS Code からデバッグできる ブレイクポイントの設置 変数の閲覧 ログ出力 Run パネルからデバッグ設定を作成、デバッグ実行 Next.js などビルドを行うものも、ファイル出力できれば デモプロジェクト よければこちらご利用ください。JavaScript と No
ブラウザ × MIDI？Web MIDI APIを使ってMIDIデバイスの入力を取ってみよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、店長です。 今回はWeb MIDI APIと、それを使って入力を取得する方法を解説したいと思います。まだまだ対応ブラウザは少ないですが、意外と簡単に扱うことができるので、ぜひ試してみてください。 Web MIDI APIとは MIDIとは電子楽器の演奏データを機器間でやりとりするための世界規格のことです。 MIDI（ミディ、Musical Instrument Digital Interface）は、日本のMIDI規格協議会（JMSC、現在の社団法人音楽電子事業協会）と国際団体のMIDI Manufacturers Association (MMA) により策定された、電子楽器の演奏データを機器間でデジタル転送するための世界共通規格。 MIDI – Wikipedia Web MIDI APIはMIDIデバイスとブラウザ間で通信をおこなうことができるAPIです。使用しているパソ
Chromeのリモートデバッギング / Virtual boxのローカル開発環境にあるアプリを確認する
Virtual Boxのローカル開発環境で動くアプリを、Google Chromeを通してAndroidの実機で見る&デバッグする方法。なんかややこしい…ので適当にイメージ図にしました。個人的にはVagrant使ってますが、使ってなくても同じです。 すでにVirtual boxで開発環境が構築されていて、アプリがブラウザで確認できる状態を前提としています。 また、Mac/PCとAndroidが同じWifiに接続されている必要があります。 また、開発中のアプリへは dev.your-app.com で接続すると過程します。 で、こんなことができて便利。 USB接続 普通にMac/PCとAndroidを繋ぎます。 パソコンのChromeを立ち上げて、chrome://inspect/#devicesにいきます。 AndroidのChromeも立ち上げると、下のようになってるはず。 プロキシの設
知らないと損!?Remote Debuggingが個人的にすごかった件。
小ネタです。 Androidを使いこなしている人や制作者にとっては知ってて当然らしいのですが、Androidを使い始めて1ヶ月半の自分にとっては目からウロコでしたよ。 ChromeでAndroidのデバッグができるモバイルをベースに制作する案件が多い方でこの設定を行っていない人はやった方が良いです。 Remote Debugging on Android with Chrome Googleがちゃんと紹介してくれていました。USBをつないで設定すれば、Androidのchromeで開いているページをPCのChromeと同期してDevelopper Toolsで表示してくれるようになります。以下のようなイメージです。 右がPCで少し切れていますが、Developper Toolsが開いているのがわかります。 設定は簡単まず、以下の条件が必要です。 Chrome 32以上Android 4.0
iron-node – nodeアプリケーションをChrome DevToolsでデバッグ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました nodeで作ったソフトウェアはデバッグが面倒なイメージがあります。debugサブコマンドもありますが、コンソールでの入力は視認性やブレークポイントの挿入などが容易とは思えません。 そこで使ってみたいのがiron-nodeです。nodeアプリケーションをChrome DevToolsでデバッグできるようにするソフトウェアです。 iron-nodeの使い方 例えば以下のようなコードがあります。debuggerというのがポイントです。 var fs = require("fs"); debugger; console.log(fs); 後はiron-nodeコマンドでnodeアプリケーションを実行します。 $ iron-node test.js 実行すると専用のChrome DevToo
IEDiagnosticsAdapter - IEのデバッグにGoogle ChromeのDevToolsを使おう
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近のWebブラウザではデバッグツールが標準搭載されています。一番使いやすいと思うのはGoogle ChromeのDevToolsでしょうか。その他FirefoxもFirebugの流れがあって使いやすいです。正直デバッガーが使い勝手悪いと開発効率が大幅にダウンします。 IEでWebサイトの検証、デバッグをしないといけないのにデバッガーの使い勝手が悪くて進まない…そんな方はIEDiagnosticsAdapterをインストールしてみましょう。 IEDiagnosticsAdapterの使い方 IEDiagnosticsAdapterはプロキシとして動きます（とはいえ設定は不要です）。まずIEDiagnosticsAdapterを立ち上げておきます。 そしてGoogle Chromeで
WebからDropboxに直接ダウンロードできるChromeエクステンション・Download to Dropbox
コンテンツを直接Dropboxにダウンロードできる、というChromeエクステンションのご紹介。Dropboxはあまり使ってないですけど、これは手軽で便利だなーとは思いました。 Web上の画像やzip、PDF等のコンテンツを直接DropboxにダウンロードできるChrome拡張です。 画像はその上で右クリック→【Upload to Dropbox】でDL出来ます。zipやPDFなどはリンクの上で同じようにすればOK。 オプションでは、日付や特定のWebサイト別で下層フォルダを作成するか否かの選択が出来ます。デフォルトのフォルダ名も変更できると良いんですけど・・ でも、スマフォやタブレットでも使えるストレージサービスなので、これは結構便利な気がしました。 Download to Dropbox お知らせさて、突然ですが、デザインをリニューアルしました。コンテンツがとっちらかってたので一纏めに
10個のTwitter をより便利にするGoogle chrome エクステンション | Last Day. jp
Tweet はじめに だんだん僕の周りでもFirefoxからGoogle chromeにメインブラウザを変更する人が増えてきました。Twitterの人気も正に飛ぶ鳥を落とす勢いです。(Follow me @Sayobs) chromeの拡張を利用することでTwitterを今よりもっと便利に使う事ができます。今回はその便利なextensionのまとめを紹介します。 今回はchromeで使えるTwitterクライアントは除外しました。 Twitter Extender Twitter Extenderは公式のTwitter.comの機能を拡張したものです。 公式RTに加えて非公式RTそしてReply to Allなんかもできるようになります。 Twitter Plus Plus Twitter Plus PlusはTwitter.comの機能を拡張したもです。下記のスクリーンショット
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Facebookライフを劇的に便利にする「Chromeエクステンション」27個まとめ : (旧)ガイアックスソーシャルメディア ラボのブログ
IDEA * IDEA
IDEA * IDEA