ksのK⊿ @PSvndBguHfKPMTl @itijiku_p_346 僕は制作者ではありませんが、正方形1枚、切り貼りなしです。展開図(山谷ついていませんが)通りに畳んで成形を頑張れば作れるということです(作れませんが) 2017-08-13 23:34:48
Chrome DevToolsを使いこなそう！ Web開発に必須なブラウザ開発ツールによるデバッグの基本 開発者ツール（DevTools）とは、ブラウザに搭載されているデバッグツールです。多岐にわたる技術の集合体であるWebページやWebアプリケーション、いわゆるフロントエンドの開発において、なくてはならないツールです。 皆さん、どうもこんにちは。今回で3度目のエンジニアHubの登場となる大竹智也です。春の季節もそろそろ終わりを迎え、新生活を迎えた人たちも新たな環境に慣れてくる時期だと思いますが、元気にお過しでしょうか。 前回までエディタの話ばかりしてきましたが、今回はエディタから離れてWebブラウザ（以下、ブラウザ）の話をしたいと思います。ただ、ブラウザの話といっても、エンジニアHubは開発者向けの媒体なので、ブラウザに搭載されている開発者ツール（Developer Tools）のお話を
#!/bin/bash exec 5> debug_output.txt BASH_XTRACEFD="5" PS4='$LINENO: ' set -x するとdebug_output.txtにログが出力される。 exec 5>はファイルディスクリプタ5番をdebug_output.txtにするという意味。 PS4はトレース出力の際に表示されるプロンプト。$LINENOにより行番号を表示している。 set -xは実行するコマンドをトレース出力させる。 元記事にはbashdb、log4bash、Eclipse、Visual Studioo Codeを使う方法なども紹介されているが、これが一番手軽でほとんどの場合十分だと思う。 Register as a new user and use Qiita more conveniently You get articles that match
※2017/4/21にオンロード時のデバッグ方法8を追記しました！ こんにちは！エイチーム引越し侍の加藤です！ みなさんJavaScript書いてますか？ console.logめっちゃ使うよねーって人は目からうろこのデバッグ方法を、 ケース毎に紹介していこうと思います。(僕はconsole.log使いません) サーバーにデバッグ用のコードをアップロードすること無いので、 消さずに意図に反してリリースしてしまう危険性がないのもお勧めです。 前提知識 F12で出てくるデベロッパーツール(Elements, Console, Source, Network)の知識 Ctrl+Shift+Fで外部ソース(js,css)に対して一括検索ができる HTML、CSSはElementsから直接修正⇒確認ができる jsはSourceから直接修正できる(Ctrl+Sで保存したらその状態で実行できる) jsは
こんにちは、投稿推進部の吉田です。 少し前に、お料理アルバムという「日々の料理を写真を記録する」ためのアプリのリリースしました。初めて会社のプロダクトのリリース作業を経験して、色々と学びがあったので共有したいと思います。 見出し releaseビルドをCIで作成する releaseビルドから不要なモノを排除する Google Playストアのリファラを活用する Google AnalyticsとGoogle Playストアの連携をする リリース直前チェックリスト releaseビルドをCIで作成する リリース版apkはコマンドから生成できる環境を整え、CIで作成するのがお薦めです。 CI上でのビルドすることで、ビルド手順の共有が不要になり、開発チームの誰でもボタン一つでビルドが可能になります。 また、ビルドをCIに任せることで、keystoreとパスワードを開発者全員に共有する必要がなくな
Chrome版のFirebugことGoogle Chrome Developer Toolsですが、以前gihyoで解説したときよりさらに便利になっているので、少し紹介します(元はWebKitなので、そのうち(近いうちに)Safariでもそれなりに使えるようになるはずです)。 圧縮されたコードの整形 まず、目立つところからいきましょう。ちょうど先日更新されたChromeのdev版(12.0.742.0)に搭載されたばかりの機能で、minifyされているJavaScriptコードを読みやすいように整形して表示してくれるというものです(IE9の開発者ツールにも実装されている機能です)。 例えば、Google Analyticsのコードは圧縮されていて普通は読めません。 しかし、Chromeのデベロッパーツールなら、 このように整形してくれます。 やり方は簡単で、デベロッパーツールのScript
Java Programming Language Googleの20%プロジェクトからJava向けの新しい技術「cofoja (Contracts for Java)」が公開された。既存の実装に大きく手を加えることなく、デバッグをより簡単にしてくれる効果が期待できる。バグは些細なコードが起こすものだったりするが、それを追跡して発見するのは時に困難を極める。これは問題が発生した箇所と、実際にバグがある箇所が大きく離れていることが理由になっていることもある。問題発生箇所とバグ発生箇所を近くにまとめることができれば、それだけバグ発見も取り組みやすくなる。 cofojaはこれを簡単に実現するための技術。インタフェースに制約表現を追加可能にするところがポイントとなっており、クラスの実装に手を加えなくてもインタフェースに制約表記を追加することで実行時にチェックできるようになる。ブログに掲載されている
はじめに 2010 年 9 月 15 日を持ちまして、サイボウズ・ラボを退職いたしたました。 報告も兼ねて、久しぶりにブログを書いてみたいと思います。 （写真はゆうすけべーさんです） この会社に入って、たくさんの学びと思い出がありました。 その一つ一つをまとめていければ、素晴らしい記事になるのかもしれませんが、僕は文章が苦手です。 ですので、うまく退職のエントリを書き上げることができません。 言葉にできない。そんな感じです。 なので、このエントリはサイボウズ・ラボやサイボウズ本社の仲間たちへのありがとうの気持ちをこめて、自分らしく最後まで JavaScript のことを書きたいと思います。 サイボウズでの最後の仕事 僕にとって、サイボウズでの最後の仕事は「JavaScript で新しいユーザーインタフェースを作ること」でした。 そして、その中で始めて複数人による大規模な JavaScrip
こんにちは、太田です。今回はChrome拡張の開発時のノウハウとして、開発ツールの解説をお送りします。Google ChromeにはWebKit由来のWeb Inspectorというデバッグツールが搭載されています。以前にも少しだけ紹介しましたが、今回は具体的な使い方まで掘り下げて解説します。なお、今回のWeb Inspectorの解説はChrome拡張だけでなく、JavaScriptを使ったウェブアプリケーションの開発に一般的に役立つノウハウとなっています。 WebKitのWeb Inspector Chrome拡張の開発の必需品であるWeb Inspectorですが、こちらは元々WebKit（Safari）で開発されたもので、Google Chrome（Chromium）に搭載されているものはさらに機能が追加されています。FirefoxにはFirebugという定番ツールがありますが、そ
Webのバグを燃やしまくるFirebugと、そのアドオン7選：ユカイ、ツーカイ、カイハツ環境！（10）（1/3 ページ） 高度化するWebのデバッグに悩む人、必見！ 近年、Google Chrome、Firefox、Safari、Opera、Internet Explorer（以下、IE）がJavaScriptの実行速度の最速の座を争っていますが、それに伴いJavaScriptによるフレームワークやコンポーネントが多数出現し、Webブラウザのユーザビリティは飛躍的に向上してきました。 一方で、開発者／デザイナにとっては複雑化するWebアプリケーションのデバッグが悩みの種となってきています。そんなときにお勧めなのが、Firefox上で動作するアドオン「Firebug」です。これを利用すれば、デバッグがかなり効率的に行えます。 本稿では、Firefoxのアドオンとして利用するFirebugと、
複雑な機能をいくつも実装したWebアプリケーションのデバッグはツールなしでは一苦労だ。Ajax処理やこまかいイベント制御・DOM操作をおこなっている箇所でバグを出してしまった日には、解析だけで大変な時間を割かなければならない。 そんなときは、FireCrystalを使えば解決するかもしれない。ユーザの操作を記録し「どのタイミングで」「なにがおこなわれているか」を一発で表示してくれる便利なアドオンだ。 本稿では、そのFireCrystalについて紹介しよう。 FireCrystalとは Stephen Oney氏は8月21日(米国時間)、Firefox上で動作するアドオン「FireCrystal」をリリースした。FireCrystalはThe MIT Licenseのもとで公開されている、Webデザイナ・デベロッパ向けのデバッガ。Webページ上でユーザの操作を記録し、内部でどのようなイベント
15 Free Functionality And Load Testing Tools For Web Applications WEBアプリ開発に便利な機能＆負荷テストツール集。 プログラム変更後の品質チェックを行える機能テスト・ユニットテスト、負荷に耐えられるか確認するために負荷テストツール、で品質向上に役立てられます。 Selenium等の定番以外にも沢山の機能テストツールや負荷テストツールがあるみたいです。 機能テストツール集 Seleniumのようなブラウザを自動で直接動作させて表示結果を確認するツール うまく運用すれば、機能を変更した際の正常動作確認に神経をすり減らすことがなくなります SeleniumHQ おなじみのテスト自動化ツール テストケース定義で自動でブラウザ上でテストしてくれます Watir Rubyのブラウザ自動化ライブラリだそう。 Windowsだと、IE、F
FirePHP - Firebug Extension for AJAX Development FirePHPがますます便利になっている件、ということで、以前に紹介したFirePHPですが、色々と更新されているようなのでご紹介。 アイコンも変わってます まず、どういうことが出来るか、という点です。以前紹介した時とやり方が結構改善されているみたい。 <?php FB::log('Log message'); FB::info('Info message'); FB::warn('Warn message'); FB::error('Error message'); ?> と書くと、以下のように表示されます。 firebugのconsole.logみたいに使えます。 PHPのコード内で、１行でかけるのでなかなか便利そうです。 次のように、オブジェクト指向で書くこともできるみたい <?php
BOOK: WEB+DB Press TITLE: 常駐型サーバーのデバッグ手法(ドラフト版) AUTHOR: (株)プリファードインフラストラクチャー 太田一樹 ＊注: この文章はWEB+DB PRESS Vol.48に掲載された記事のドラフト版です はじめに 今回はデバッグ関連特集ということで、常駐型サーバープログラムを作成する際のハマりどころやそれに対する解析方法・解析ツール・対策を、実際の経験を交えながら紹介したいと思います。 筆者は(株)プリファードインフラストラクチャーでインメモリ分散検索エンジン「Sedue (セデュー)」を開発しています。モバイル向け検索エンジン「エフルート」や、2008/11/6にリニューアルされました「はてなブックマーク2」などの検索バックエンドとして使われております。 この検索エンジンはいくつかの常駐型サーバープログラムから構成されており
Windows XP/Vista/2003/2008 Server上のInternet Explorer 6/7/8 Beta 2、Mozilla Firefox 2.0/3.0/3.1 Beta 2で動作するフリーソフトで、HTTP/HTTPSのリクエストヘッダ表示、HTTPの圧縮率表示、ページ内の各要素の読み込み時間のチャート化、ステータスコードやレスポンスサイズの表示、フィルタリング、さらにはこれら一連の通信をログファイルに記録することなども可能です。 時間はミリセカンド単位で表示が可能となっており、まさにHTTPデバッガと言っても差し支えないレベルなので、「ページの読み込みが遅い原因を知りたい」とか「ちゃんとサーバの設定が反映されているかどうかを確認したい」「ウェブアプリの動作チェックがしたい」という場合に役立ちます。この種類のソフトにありがちな日本語の文字コードが解釈できないとい
サイト構築の際、欠かせないツールのひとつといえば Firebug。JavaScript を使ったウェブアプリケーションのデバッグだけでなく、サイトデザインをしている方にとっても便利なツール。テストの際、レイアウトが崩れていたとしても Firebug で調べればだいたいのことは解決します。この Firebug のコンパニオンツールが Firescope です。 Firescope は、Firebug 内で CSS/HTML のタグの意味や使い方をチェック出来るツール。インストール後、Firebug のパネルに新たに「Reference」というタブが追加されます。HTMLビューや「調査」の際に選択したタグと下階層にあるタグの意味が Reference に表示されます。最新のブラウザだけですが、その場でサポート状況も見れるのは便利です。もっと詳しく知りたい方は提供元の Sitepoint のペー
※ 画面は公式サイトデモより JavaScriptのデバッグによく利用されるものと言えば、alertだろう。簡単に使えて便利な関数だが、ブラウザの処理が止まってしまったり、長文の表示が難しいなどデメリットも数多い。 alertとお別れするためのJavaScriptデバッグツール そこで使ってみたいのがBlackbirdだ。Google Code上で公開されているオープンソースのJavaScriptアラートだ。 Blackbirdは見た目の格好いいフローティングダイアログにログを表示できる。デバッグ、インフォ、ウォーニング、エラー、プロファイルの5つのメッセージパターンが設定できる。Blackbirdのウィンドウでは各メッセージタイプの表示、非表示が切り替えられるようになっている。 表示位置の変更、表示するメッセージの種類が変更できる さらにF2キーを押して表示/非表示を切り替えたり、Shi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
