『龍が如く7』は進化を続け、自動バグ発見どころかほぼ全自動のバグ取りシステムを構築。これぞ無職から勇者に成り上がるデバッグだ！【CEDEC 2020】 | ゲーム・エンタメ最新情報のファミ通.com
本記事では、1日目におこなわれた『龍が如く7 光と闇の行方』（以下、『龍が如く7』）のデバッグに関するセッション“「龍が如くスタジオ」のQAエンジニアリング技術を結集した全自動バグ取りシステム”をリポート。 セッションには、セガのQAエンジニア・阪上直樹氏と、ビルドエンジニアの粉川貴至氏が登壇した。 バグをハグしたくなる自動システム！ まずは阪上氏が開発者たちへ向けて、「バグは好きですか？」という質問からセッションがスタート。最初に龍が如くスタジオの各タイトルで、バグを発見した数の推移が公開された。ゲームの規模が大きくなるにつれ、バグも増加傾向にあるという。 そして全自動バグ取りシステムを運用した『龍が如く7』では、なんと25000ものバグが発見されたという。こう見るとネガティブな印象を受けるかもしれないが、バグ発見数が多ければ多いほど、ゲームクオリティがアップするということだ。 バグとい
ブラウザ上でデバッグするときに使えるテクニック
ウェブ上でJavaScriptを実行してバグが発生した場合、ブラウザに内蔵されている開発者ツールを使ってデバッグすることがよくあります。そうしたブラウザでのデバッグにおいて役立つテクニックをNetflixでフロントエンドの開発に携わっているアラン・ノルバウアーさんがまとめています。 67 Weird Debugging Tricks Your Browser Doesn't Want You to Know | Alan Norbauer https://alan.norbauer.com/articles/browser-debugging-tricks ◆高度な条件付きブレークポイント 開発者ツールの「ソース」タブにはデバッガーが用意されており、JavaScriptの任意の行にブレークポイントを設定することで実行を一時停止して変数やコールスタックの中身を確認できます。ブレークポイントを
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
Chrome DevTools の知っておくと便利かも機能 - Qiita
長い間 Chrome の DevTools を使ってきて、便利だなと思った機能をまとめてみました。 様々な機能があり、これを覚えておくと開発時に役に立つかもしれないので、ぜひ使ってみてください。 この記事は Corome DevTools 公式 を参考にしています。 日本語化 英語が苦手な方は日本語化しましょう。 手順 DevTools を開いたら、歯車マークをクリック Language で日本語を選択 [Reload DevTools] をクリックして DevTools のリロードをする 要素の状態を強制 指定の要素を :hover や :focus などの状態に強制的にすることができます。 そうすることで指定状態時のスタイルを確認することができます。 手順 要素タブをクリックする 状態を変更したい要素を選択する 今回は Google の検索フォームを選択 [:hov] をクリックする
Chrome 91でデベロッパーツールがさらに便利に！スクロールスナップの実装と検証が簡単になりました
25日にリリースされたChrome 91のデベロッパーツールに、CSSの実装に役立つツールが搭載されました。Chrome 90ではFlexboxのデバッグツールが搭載され、今回のChrome 91ではスクロールスナップ（scroll-snap-typeプロパティ）の配置が可視化できるようになり、実装と検証に役立ちます。 参考: What's New In DevTools (Chrome 91) スクロールスナップ（scroll-snap-typeプロパティ）について、以前の記事をご覧ください。 CSSのスクロールスナップの便利な使い方、実装の注意点を徹底解説 では、Chrome 91のデベロッパーツールでスクロールスナップ（scroll-snap-typeプロパティ）のデバッグツールの使い方を紹介します。 まずは、スクロールスナップを使用しているページをChrome 91で開きます。手元
JavaScript で print デバッグ時に変数名を出力する - mizdra's blog
数列の和を求めるプログラムを作成することになり、意気揚々と以下のようなプログラムを書いたという状況を想像して下さい。 function sum(nums, acc = 0) { if (nums.length === 0) return 0; if (nums.length === 1) return nums[0]; return sum(nums.slice(1), acc + nums[0]); } const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; console.log(sum(nums)); // expected: 55 一見すると何も問題なさそうに見えるプログラムですが、実はバグがあります (皆さん分かりますか?) *1。実際に上記プログラムを実行すると 55 ではなく 10 が出力されます。 こうした場面に遭遇すると、自然と sum
『龍が如く7』は進化を続け、自動バグ発見どころかほぼ全自動のバグ取りシステムを構築。これぞ無職から勇者に成り上がるデバッグだ！【CEDEC 2020】 | ゲーム・エンタメ最新情報のファミ通.com
本記事では、1日目におこなわれた『龍が如く7 光と闇の行方』（以下、『龍が如く7』）のデバッグに関するセッション“「龍が如くスタジオ」のQAエンジニアリング技術を結集した全自動バグ取りシステム”をリポート。 セッションには、セガのQAエンジニア・阪上直樹氏と、ビルドエンジニアの粉川貴至氏が登壇した。 バグをハグしたくなる自動システム！ まずは阪上氏が開発者たちへ向けて、「バグは好きですか？」という質問からセッションがスタート。最初に龍が如くスタジオの各タイトルで、バグを発見した数の推移が公開された。ゲームの規模が大きくなるにつれ、バグも増加傾向にあるという。 そして全自動バグ取りシステムを運用した『龍が如く7』では、なんと25000ものバグが発見されたという。こう見るとネガティブな印象を受けるかもしれないが、バグ発見数が多ければ多いほど、ゲームクオリティがアップするということだ。 バグとい
CSSのデバッグは、けっこう難しい
Web制作で一番悩ましいのが、期待通りに動作しないことだと思います。 CSSも簡単なものであれば、すぐに原因が特定できて修正できますが、デバッグするのが難しい時もあります。 そんな事例を紹介します。 CSS debugging is hard by Vincent De Oliveira 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSのデバッグは難しい CSSはデバッグするのが難しい時があります。Appleのサイトを例に見てみましょう。 blink-devで先日、backdrop-filterの実装についてアナウンスされました。 backdrop-filterとは、要素の背景（その下にあるもの）にフィルタを適用する本当に素晴らしいCSSのプロパティです。このプロパティはすでにSafariとEdgeに実装されており、Chr
1クリックでHTML要素の構造を可視化し、セマンティック要素が正しく実装されているか検証できる -Construct.css
Webページに実装されているHTML要素の構造を可視化し、header, nav, main, articleなどセマンティック要素が正しく実装されているか検証できるスタイルシートを紹介します。 デバッグ機能も備えており、不正なマークアップや問題のあるマークアップを表示することもできます。 Construct.css Construct.css -GitHub Construct.cssはセマンティックHTMLの使い方をより身近にするために、スタイルをフックとしてクラス名を使用するのではなく、直接タグをスタイルするCSSのライブラリです。目に見えないセマンティックのタグであることを視覚的に確認することができます。 ブラウザで簡単に利用できるブックマークレットも用意されています。 ブックマークレット Construct.cssのブックマークレット ブックマークレットを使用すると、以下のCSS
JavaScriptのデバッグ方法 – JSを嫌いにならないためのTips | POSTD
この記事のオリジナルは voxxed に投稿されたものです。 JavaScript関連の問題を抱えるチームをサポートする仕事を通じて、いくつか共通の問題点があることに気づきました。もしあなたもJavaScriptに対するイライラを感じているのであれば、この記事は何らかの助けになるかもしれません。おことわり：私がお教えするヒントはすでにご存知のものもあるとは思いますが、うまくいけば、多少なりとも有用な情報があるかもしれません。特にエンタープライズアプリケーションやCMSソリューションを構築する際に有効なヒントです。チームの誰もが話したがらないCMSのコードについてお話しします。いずれも必要に応じて採用できるものです。 debuggerステートメント 大半のブラウザでサポートされているにもかかわらず、JavaScriptを書く際に最も活用しきれていない機能の1つです。debuggerステートメ
【JavaScript】デバッグをする際に使える22個のconsoleオブジェクトのメソッド - ノンカフェインであなたにやさしい
JavaScriptのデバッグをする際にconsole.logをよく使いますが他にも便利なメソッドがあります。 consoleオブジェクトの中身を確認すると以下のメソッドが定義されています。 assert clear count debug dir dirxml error group groupCollapsed groupEnd info log profile profileEnd table time timeEnd timeStamp timeline timelineEnd trace warn console.assert(expression, object) expressionが偽の場合、コンソールにobjectを出力します。 console.clear() コンソールをクリアします。 console.count(label) コンソールにlabelと累計実行回数を出力
JavaScriptエラーを表示・確認する方法のまとめ
JavaScriptエラーを表示・確認する方法をまとめました。 １．はじめに ブラウザでページを表示したときに正しく表示されない、あるいはjQueryで設置したパーツなどが動作しない場合、JavaScriptエラーが発生している可能性があります。 JavaScriptエラーが発生しているかどうかを確認するためにはエラーを表示するためのコンソールを開く必要がありますが、コンソールの開き方が分からなかったり、ブラウザで操作方法も異なります。 このエントリーでは、以下のブラウザを対象にしてJavaScriptエラーの表示・確認方法を解説します。 Google Chrome Firefox IE ビギナーの方向けの内容です。 ２．エラーになるJavaScriptのサンプル エラーになるJavaScriptのサンプルとして、次のサンプルを用いて解説します。このJavaScriptを実行するとシンタッ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptのコードフローを視覚化するTraceGL
css-eblog.com