web-dev-qa-db-ja.com

JavaScriptで現在の行番号を確認するにはどうすればよいですか？

JavaScriptには、現在実行中のステートメントの行番号を決定するメカニズムがありますか（もしそうなら、それは何ですか）。

javascriptline-numbers
75
Matthew Murdoch

var thisline = new Error().lineNumber

使用している環境でそれが機能しない場合は、次を試してください：

var stack = new Error().stack

次に、行番号のスタックを探します。

55
z5h

使用できます

function test(){
    console.trace();
}
test();
27
baligena

異なるブラウザーとブラウザーのバージョン間でもう少し移植可能（Firefoxで動作するはずです、ChromeおよびIE10 +）：

function ln() {
  var e = new Error();
  if (!e.stack) try {
    // IE requires the Error to actually be throw or else the Error's 'stack'
    // property is undefined.
    throw e;
  } catch (e) {
    if (!e.stack) {
      return 0; // IE < 10, likely
    }
  }
  var stack = e.stack.toString().split(/\r\n|\n/);
  // We want our caller's frame. It's index into |stack| depends on the
  // browser and browser version, so we need to search for the second frame:
  var frameRE = /:(\d+):(?:\d+)[^\d]*$/;
  do {
    var frame = stack.shift();
  } while (!frameRE.exec(frame) && stack.length);
  return frameRE.exec(stack.shift())[1];
}
22
jwatt

関数のソースを解析して、いくつかのマークを探すことができます。
簡単な例を次に示します（はい、少し台無しになっています）。

function foo()  
{       
    alert(line(1));
    var a;
    var b;      
    alert(line(2));
}   
foo();

function line(mark)
{
    var token = 'line\\(' + mark + '\\)';       
    var m = line.caller.toString().match(
        new RegExp('(^(?!.*' + token + '))|(' + token + ')', 'gm')) || [];
    var i = 0;
    for (; i < m.length; i++) if (m[i]) break;
    return i + 1;
}
3
Mikhail Nasyrov

あなたが試すことができます：

window.onerror = handleError;
function handleError(err, url, line){
   alert(err + '\n on page: ' + url + '\n on line: ' + line);
}

次に、知りたい場所にエラーをスローします（あまり望ましくありませんが、デバッグしている場合に役立ちます）。

注意： window.onerrorがWebKitで定義/処理されていない、またはOpera（前回チェックしたとき）

1
scunliffe

次のスニペットをコードに挿入します。

console.debug("line:", /\(file:[\w\d/.-]+:([\d]+)/.exec(new Error().stack)[1]);
1
crishushu

コードがjavascript + PHPの場合、PHPでavailable <?= __LINE__ ?>として使用できるため、現在のPHP行番号はjavascriptでリテラル定数として使用できます。

（つまり、明らかにPHP短いタグが有効になっていると仮定しています。）

したがって、たとえば、javascriptでは次のように言うことができます。

this_php_line_number = <?= __LINE__ ?>;

ただし、注意しないと、PHP行番号はJavaScript行番号と異なる場合があります。これは、PHPがブラウザに表示される前にソース行を「食べる」ためです。したがって、問題はPHPとjavascriptの行番号が同じであることを保証することになります。それらが異なる場合、ブラウザのjavascriptデバッガーを使用することはあまり快適ではありません。

サーバー側（PHP）とブラウザー側（javascript）の行番号を同期するために必要な正しい行数の改行を書き込むPHPステートメントを含めることで、行番号が同じであることを確認できます。

コードは次のようになります。

<!DOCTYPE html>
<html lang="en">
<!-- Copyright 2016, 2017, me and my web site -->
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, user-scalable=yes">

<?php

...lottsa PHP stuff here, including all PHP function definitions ...

echo str_repeat("\n",__LINE__-6); # synchronize PHP and Javascript line numbers
?>
<!-- *** this is line <?php echo __LINE__ . ' of ' . basename(__FILE__); ?> *** -->

  <title>My web page title</title>

...lottsa HTML & Javascript stuff here...

</body>
</html>
<!-- *** this is line <?php echo __LINE__ . ' of ' . basename(__FILE__); ?> *** -->

キーは次のとおりですPHPステートメント：

echo str_repeat("\n",__LINE__-6);

これは、javascriptで表示される行番号をPHP行番号と同じにするために十分な改行を吐き出します。すべてのPHP関数定義などは、その行の先頭にあります。

その行の後、PHPの使用を、行番号を変更しないコードに制限します。

「-6」は、私のPHPコードが8行目で始まるという事実を説明しています。PHPコードを先に開始すると、その数が減ります。一部の人々は、PHPを最上部に配置し、DOCTYPEの前に配置します。

（メタビューポート行は、このスタックオーバーフローごとのAndroidChrome"font boosting"を無効にしますQ＆A： Chrome onAndroidフォントのサイズを変更します 。すべてのWebページに必要な定型文を検討してください。）

次の行は、私が間違いを犯していないことを確認するためのものです。ブラウザーのデバッガーで表示するか、右クリック/ save-web-pageで表示すると、正しいソースファイル名と行番号を示すHTMLコメントになります。

<!-- *** this is line <?php echo __LINE__ . ' of ' . basename(__FILE__); ?> *** -->

になる：

<!-- *** this is line 1234 of my_file.php *** -->

これで、エラーメッセージであろうとjavascriptデバッガであろうと、行番号が表示されている場所はどこでも正しいです。 PHP行番号とjavascriptの行番号は常に一貫して同一です。

0
Dave Burton