タグ

関連タグで絞り込む (7)

タグの絞り込みを解除

browserとdebugに関するakishin999のブックマーク (9)

  • 拡張機能で Chrome DevTools に独自パネルを追加してトラブルシュートに役立てよう - Techtouch Developers Blog

    こんにちは、カスタマーサクセスエンジニア（CSE）の komo です。 この記事では CSE の主業務の１つにテクニカルサポートがありまして、それを効率化するために作ったツールの話をします。 具体的には Google Chrome 拡張機能で DevTools に独自パネルを追加して、トラブルシュートに有用な情報を表示させるツールです。実物をそのまま紹介はできないため、ひな形を別途作りました。作り方を書くので、同じようなカスタマー系エンジニアの方々に真似してもらって、役立ててもらえると嬉しいです。 ツールの説明 ひな形からの発展形 作り方 ステップ1：最小の拡張機能を作る ステップ2：パネルを追加する ステップ3：パネルに機能を追加する おまけ：動作確認・キャプチャ取得用に作ったHTMLとJSON おわりに 参考資料 ツールの説明 別途作ったひな形はこんなものです。 通信を監視して、特定の

    拡張機能で Chrome DevTools に独自パネルを追加してトラブルシュートに役立てよう - Techtouch Developers Blog

  • [サーバーサイドAPIデバッグ術]ブラウザのリクエストを簡単にリトライしてサーバーの挙動を見る方法 - Qiita

    APIの開発してますか？挙動の確認を見る時どうしてますか？ curlを手書きしている？パラメータがないリクエストなら手軽で良いですね。 Postmanのようなツールを使っている？素晴らしい！ ブラウザで実際に画面を表示している？うーん…それって繰り返したいとき大変なんじゃ…… とはいえ、ブラウザで実際に画面を表示すると、パラメータの組み立てが非常に楽というメリットがあります。 認証情報付きリクエストとか組み立てるの大変ですもんね。 ここで、ブラウザのリクエストをそのまま繰り返したり、ちょっとだけパラメータを組み替えられたら便利だと思いませんか？ 今回はそんな方法を紹介します。 cURLでコピーしてリトライする Chromeの開発者ツール（Windows F12、Mac Cmd + Opt + I)を開いてネットワークタブを開いてください。 この状態で目的のページを開いてください。 Pres

    [サーバーサイドAPIデバッグ術]ブラウザのリクエストを簡単にリトライしてサーバーの挙動を見る方法 - Qiita

  • リモートWeb開発者ツール「Vorlon.JS」

    リモートWeb開発者ツール「Vorlon.JS」 2015-11-18 Web開発者ツールといえば、ブラウザに付属されている開発ツールやFirebug、Dragonflyなどを思い浮かべる方が多いでしょう。これらの開発ツールはブラウザに大きく依存しています。 今回紹介するのは、プラットフォームに依存しないリモートWeb開発者ツール「Vorlon.JS」です。 Vorlon.JSについて Vorlon.JSは、Microsoftが開発しているオープンソースプロジェクトです。node.jsとsocket.ioが利用されています。 このツールは、ChromeのDevToolsなどと同様にDOMやネットワークなどの情報を確認するための開発ツールです。 Vorlon.JSの特徴は、ブラウザ上で開発ツールが動作します。そのためブラウザやOSに依存することなく、1つの開発ツールの画面から複数の閲覧環境を

    リモートWeb開発者ツール「Vorlon.JS」

  • Vorlon.JS·多数のブラウザをまとめてデバッグできるリモートデバッガー MOONGIFT

    今はWebブラウザの種類も増え、かつスマートフォンまであるなどWebサイトの作成も大変になっています。しかも開発ツールの使いやすいブラウザ、使いづらいブラウザもあり、開発に時間がかかります。 そんな現状を打破できるかも知れないのがVorlon.JSです。Vorlon.JSを使うと多くのWebブラウザのデバッグを一元管理できるようになります。 Vorlon.JSの使い方 Vorlon.JSはnpmでインストールできます。 $ npm install vorlon そしてvorlonコマンドでサーバが立ち上がります。 $ vorlon 後はこのVorlon.JSが出しているJavaScriptをデバッグしたいWebページ内に組み込みます。 <script src="http://localhost:1337/vorlon.js"></script> これで準備は完了です。例えば以下のようになり

    Vorlon.JS·多数のブラウザをまとめてデバッグできるリモートデバッガー MOONGIFT

  • Chrome DevToolsを使いこなすための参考サイトまとめ | 1 pixel｜サイバーエージェント公式クリエイターズブログ

    1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 フロントエンドエンジニアの谷です。 本記事ではGoogle Chromeの開発者ツール、Chrome DevToolsを使いこなすために参考になるサイト、ページの紹介をします。 すでに多くのフロントエンドエンジニアが開発で使っているかもしれませんが、「要素のインスペクタなどの基本的な機能しか使っていない」「UA切り替えくらいしかつかってない」というような方や、そもそもほとんど使ったことがない、という方もこれらを参考にフロントエンド開発を効率化していきましょう！ 基本的な使い方 Chrome DevTools Overview 基本はやはり公式ドキュメ

    Chrome DevToolsを使いこなすための参考サイトまとめ | 1 pixel｜サイバーエージェント公式クリエイターズブログ

  • 第2回　完全版：ブラウザとデバッグ環境 | gihyo.jp

    こんにちは、太田です。前回はクロスブラウザの入口として、各ブラウザの特徴をまとめつつ、実際にクロスブラウザなコードを紹介しました。今回はクロスブラウザ対策における基本である、各ブラウザ環境の構築について解説したいと思います。 前回紹介した通りブラウザにはたくさんの種類・バージョンがあります。それぞれが動作する環境を用意するだけでも、一苦労ではすみません。なるべく少ないマシンで、各バージョンをインストールして、さらにデバッグするための環境作りについて紹介します。なお、Safari以外はWindows環境を想定しています。さらに、特に断りがない限りはWindows XP SP3をベースに解説させていただきます。ご了承ください。 各ブラウザのデバッグ環境は近年目覚しいほどの進化を遂げています。統合デバッグ環境の草分けであるFirebugを筆頭に、Safari/Chrome（WebKit）のWeb

    第2回　完全版：ブラウザとデバッグ環境 | gihyo.jp

  • Top - FireMobileSimulator.org

    FireMobileSimulatorはFirefox/Chrome版ともに配布・メンテナンスを終了しました。本ページの内容は記録のみの目的で残しています。 FireMobileSimulatorとは？ FireMobileSimulatorは、主要３キャリア（DoCoMo/Au/SoftBank）の携帯端末ブラウザをシミュレートして、モバイルサイト開発を容易にするために作成されたGoogle Chrome/Firefoxの拡張機能です。携帯端末のHTTPリクエスト、絵文字表示、位置情報送信機能などの動作をシミュレートすることができます。 モバイルサイトをPCで閲覧するために、従来からある方法として、キャリア公式シミュレータの使用、Proxyの使用、Firefoxのuseragentswitcher+modify headersの組み合わせ等、色々と手段はありましたが、これらの方法はそれぞ

  • Web 開発者の責任 (翻訳): Days on the Moon

    John Resig 氏による A Web Developer's Responsibility という記事が素晴しかったので、著者の許可を得てここに日本語訳を掲載します。 Web 開発者の最大の負担は、ブラウザのバグと非互換性への対応に膨大な時間を費やすことであるといって間違いないでしょう。それゆえに、それらへの対応に不満をいうのは、Web 開発者全員の常となっていました。ブラウザのバグは迷惑でいらだたしく、仕事を大幅に難しくします。 ブラウザのバグはとてもいらだたしく、通常の開発における最大の負担です。ですから、開発対象のブラウザが、自身のバグを見つけ修正できるようにしてやるのは、すべての Web 開発者にとっての責任です。自分が見つけたバグに対して責任を持ち、「ほかの誰かがこれを見つけるだろう」とは思わないことで、ブラウザの進歩の速度は加速していくでしょう。 ブラウザを支援する解決策

  • ベンチマークを完走させる - latest log

    ベンチマーク中に「なんかビジー。スクリプト止めとく?」なダイアログで、台無しになってしまうことがあります。 今日はそれを回避する設定をご紹介。 IE: レジストリに新しい値を追加することで可能 KEY: HKEY_CURRENT_USER/Software/Microsoft/InternetExplorer/Styles/MaxScriptStatements(DWORD) VALUE: デフォルトが 5000000 なのでそれ以上の値を指定する Firefox: about:configで設定可能 KEY: dom.max_chrome_script_run_time VALUE: デフォルトが 20 なのでそれ以上の値を指定するか、0 を指定する。0 でタイムアウトしなくなる。 Safari: 開発メニューで設定可能 [メニュー] - [開発メニュー] - [Runway JavaS

    ベンチマークを完走させる - latest log
  • 1

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.