開発体験を変える! Chrome DevTools Tips 7選 - Qiita
最近Chrome DevToolsについて調べていて発見した便利機能を紹介します。 誰もが使える最高便利な開発マシンChrome DevToolsを使いこなして開発体験を変えましょう！ 1. $0で選択中のDOM要素の取得 特定の要素に何かしたいという時には、要素のIDやclassを確認してConsoleでdocument.querySelector("#xxx")で取得するというのが一般的だと思います。実はそれはカーソル選択と$0で代替できます。 Classや、IDがついていない特定のDOMを取得したい時とかにも使えるので地味に便利です。 手順 カーソルで取得したい要素を選ぶ Consoleタブで$0を入力 最近知ったChrome DevToolsの便利機能① $0 での選択中のDOM要素取得 Elementsタブで選択状態のDOM要素は、Console上で $0 を入力することで取得で
【2019年4月版】JavaScriptのconsoleがすごいことになってた。 - Qiita
JavaScript の console がすごいことになっているらしい。 本日、以下の記事を見つけました。 Getting creative with the Console API! この記事で紹介されている console のメソッド全然知らなかったのでビックリしましたが、実際にどう表示されるのか載っていなかったのでChromeのコンソールでスクショを取ってみました。 console.log() 本文によるとlogメソッド内のテキストリテラルは以下の書式で値のフォーマットと置換ができるそうです。 %o / %O - for objects; %d / %i - for integers; %s - for strings; %f - for floating-point numbers; マジすか・・・ そんなわけで以下のコード console.log("Object value:
Chromeで不要なCSS/JavaScriptを洗い出す
こんにちは！ 開発部の武内です。 Webフロントエンドの開発はここ数年で急激に高度化していますが、 それを大きく後押ししている一因にブラウザ付属の開発ツールがあります。 Chrome、Firefox、Edge、Safariなどに付属していますが、どれも非常に高機能です。 Webフロントエンドエンジニアで使っていない方はいないのではないでしょうか。 グラフィカルなデザイン調整 コードのステップ実行 通信のロギング etc… 今回、Chrome 59のアップデートでCSS/JavaScriptのカバレッジ機能が追加されたので試してみました。 CSS and JS code coverage What’s New In DevTools (Chrome 59) Find unused CSS and JS code with the new Coverage tab. When you load
ペイ近況3 - diary
Payment Request API ブラウザに保存しているクレジットカード番号を JS を使って引っ張ってこれるブラウザの API 各ブラウザで決済ダイアログのようなものが表示される Chrome for Android ではすでに使える。Chrome for Desktop は 61 から Edge は実装済み。Firefox, Safari はデスクトップ、モバイル共に未実装だがサポート予定 上のブラウザ全てで実装されたとしても古いOS、ブラウザが残っている限りクライアント側で何らかの fallback が必要 使用の可不可は window.PaymentRequest で判断 fallback 用に自前でフォームを用意してもいいが、可不可の判断も JS で行うため PSP 各社が提供している Checkout と呼ばれるライブラリを使うことが、Payment Request AP
NewsPicks の Chrome 拡張機能の裏側 - Qiita
はじめに （JavaScript Advent Calendar の 11 日目が空いていたので急遽代わりに投稿させて頂きました） JavaScript Advent Calendar 1 日目に sota1235 さんが「今さら聞けない Chrome エクステンションの作り方」という記事を投稿されているので、今回は最近開発したばかりの NewsPicks の Chrome 拡張について、工夫したポイントなどを書いてみようかと思います。 NewsPicks Chrome 拡張の機能紹介 以下簡単に主要な 3 つの機能を紹介します。詳細を知りたい方はこちらの記事 もしくは実際に Chrome 拡張をインストールして頂ければ簡単な利用ガイドがありますのでご覧ください。 サイドバー サイドバーを使って現在表示中の URL に関連する情報（コメント・企業情報・財務チャートなど）を表示することが出来
ページのJavaScriptを動的に書き換えて実行する - Qiita
DevToolsで動的にページのJavaScriptを書き換えて実行できるのを数ヶ月前まで知らなかったのでメモ。 上のGIFでは、DevToolsのSourcesタブから、ページ内で読み込まれているJavaScriptのファイルを選択して、onkeydownで呼ばれる関数の中を書き換えて、⌘ + sで保存してる。そのあとtextareaに文字を入力すると、書き加えたコード（ここで追加してるのはconsole.logね）が実行されて、文字列が下部のConsoleに出力されてるのがわかる。 ちなみに、1行目にブレークポイントを置いて停止している間に書き換えることもできる。当然、全部削除して保存すると何も実行されなくなる。 HTTPSでローカルプロキシしにくいページとかでデバッグするのに便利かなーと思った。 Register as a new user and use Qiita more co
Deb.js·JavaScriptのデバッグを効率化する小さなライブラリ MOONGIFT
最近のWebブラウザの進化によってJavaScript開発はとても便利になっています。ブレイクポイントを差し込んだり、コンソールを使うことでどんどん開発が進められるようになっているでしょう。 そんなJavaScript開発をさらに便利にしてくれそうなソフトウェアがDeb.jsです。ごくごく小さなデバッガーです。 Deb.jsの使い方 Chrome ウェブストアで公開されていますので、インストールします。 こちらがインストール画面です。 インストールされるとDebアイコンが追加されます。 こんな感じでURLに?debjsを追加すると自動で読み込まれるようになります。 任意の関数に.deb()を追加するとスタックとレースされるようになります。 引数や返り値、実行時間などもとれて便利です。 色分けもされるので分かりやすいですね。 開発効率向上を考えると、デバッグ方法は色々知っておいて損はないでし
Chromeで日本語入力を禁止する - Qiita
Chromeで日本語入力を禁止したい ・IEやFFと同じようにChromeで日本語の入力を禁止したい ・ChromeはCSSのime-mode:disabledに対応していない ・「とにかくヤレ」と神の声を賜ったので、JavaScriptで頑張ってみる 2015/9/17編集 masa-kunikataさんアドバイスの正規表現方式に変更。 textareaで改行・タブもとおるようにしました。 jQuery(document).ready(function() { // ime-modeが使えるか var supportIMEMode = ('ime-mode' in document.body.style); // 非ASCII var noSbcRegex = /[^\x00-\x7E]+/g; // 1バイト文字専用フィールド jQuery('.sbc_field') .on('key
JSCapture·こんなことまで！JavaScriptでスクリーンショット&キャストの保存 MOONGIFT
HTML5ではgetUserMediaを使ってWebカムにアクセスできるのは良く知られています。しかしデータの入力元は他にも考えられます。その一つがディスプレイです。画面に表示されている内容は確かに出力データになるでしょう。 そんな画面の内容をキャプチャできる機能が最新のGoogle Chrome（35以上）から登場しています。その実験とも使い方を紹介するのがJSCaptureです。 JSCaptureの使い方 まず最初にGoogle Chromeの設定を有効にする必要があります。 設定を有効にしたら再起動しましょう。 まずはキャプチャです。JSCaptureのサイトで実際に試すことができます。キャプチャをクリックするとダイアログが出ます。 画面共有の確認が出ますので、はいを押します。 見事キャプチャされました。Downloadを押して画像として保存できます。 次にレコーディングです。結構
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
