اشکال‌زدایی بااستفاده از گزارش‌های کنسول جاوا اسکریپت

این سند روش‌های مختلفی را برای مشاهده گزارش‌های کنسول جاوا اسکریپت برای اشکال‌زدایی محتوا در WebView شرح می‌دهد.

دسترسی به کنسول جاوا اسکریپت به شما امکان می‌دهد خطاها، هشدارها، و پیام‌های سفارشی را از دستورات جاوا اسکریپت console.log() خود مشاهده کنید تا تشخیص دهید چه اتفاقی در WebView رخ می‌دهد. سه روش مختلف برای مشاهده پیام‌های کنسول جاوا اسکریپت تولیدشده توسط WebView شما وجود دارد:

  • Chrome DevTools: «وب‌نما» را به Chrome DevTools متصل کنید. برگه کنسول را باز کنید تا پیام‌های کنسول جاوا اسکریپت WebView را ببینید.

  • برنامه WebView DevTools: از برنامه WebView DevTools برای فعال کردن پرچم webview-log-js-console-messages در دستگاهتان استفاده کنید تا گزارش‌های کنسول را در Logcat مشاهده کنید.

  • رهگیری پیام: رهگیری پیام‌های کنسول جاوا اسکریپت با پیاده‌سازی onConsoleMessage() در WebChromeClient. این رویکرد در بخش زیر به‌طور مفصل شرح داده شده است.

اگر محتوا را از سرور وب محلی در ماشین توسعه نرم‌افزارتان ارائه می‌دهید، برای آشنایی با نحوه اتصال به آن از دستگاه یا شبیه‌ساز، دسترسی به سرور توسعه نرم‌افزار محلی از وب‌نما را ببینید.

رهگیری پیام‌ها با onConsoleMessage()

میاناهای برنامه‌سازی کاربردی کنسول هنگام اشکال‌زدایی WebView پشتیبانی می‌شوند. باید WebChromeClient ارائه دهید که روش onConsoleMessage() را برای نمایش پیام‌های کنسول در Logcat پیاده‌سازی کند. سپس، WebChromeClient را با setWebChromeClient() به WebView خود اعمال کنید.

‫WebChromeClient کلاس کمکی برای WebView است. این کلاس رویدادهای مربوط به واسط کاربر را که در محتوای وب اتفاق می‌افتند مدیریت می‌کند، مانند نمایش هشدارهای جاوا اسکریپت، تغییر عنوان صفحه وب، و مدیریت پیام‌های ارسال‌شده به کنسول مرورگر.

کد زیر یک WebChromeClient را پیکربندی می‌کند تا خروجی‌های کنسول جاوا اسکریپت را رهگیری کند و آن‌ها را برای اشکال‌زدایی آسان‌تر به Logcat هدایت کند.

کاتلین

val myWebView: WebView = findViewById(R.id.my_webview)
myWebView.webChromeClient = object : WebChromeClient() {
    // Override onConsoleMessage to intercept JavaScript console messages
    override fun onConsoleMessage(message: ConsoleMessage): Boolean {
        // Log JavaScript console messages to Logcat
        Log.d("WebViewConsole", "${message.message()} -- From line ${message.lineNumber()} of ${message.sourceId()}")
        // Return true to indicate that the message has been handled
        return true
    }
}

جاوا

WebView myWebView = findViewById(R.id.webview);
myWebView.setWebChromeClient(new WebChromeClient() {
    // Override onConsoleMessage to intercept JavaScript console messages
    @Override
    public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
        // Log JavaScript console messages to Logcat
        Log.d("MyApplication", consoleMessage.message() + " -- From line " +
        consoleMessage.lineNumber() + " of " + consoleMessage.sourceId());
        // Return true to indicate that the message has been handled
        return true;
    }
});

بااستفاده از onConsoleMessage()، منطق ثبت سفارشی شما به گرداننده اصلی برای خطاهای JavaScript تبدیل می‌شود، جایگزین رفتار پیش‌فرض پرچم webview-log-js-console-messages می‌شود، و به شما امکان می‌دهد گزارش‌ها را به روشی که می‌خواهید قالب‌بندی کنید.

ConsoleMessage همچنین شامل شیء MessageLevel است تا نوع پیام کنسول درحال توزیع را نشان دهد. می‌توانید سطح پیام را با messageLevel() جستجو کنید تا شدت پیام را تعیین کنید، سپس از روش مناسب Log استفاده کنید یا اقدامات مناسب دیگری انجام دهید.

وقتی روش کنسول را در صفحه وب خود اجرا می‌کنید، Android روش onConsoleMessage(ConsoleMessage) را فراخوانی می‌کند تا بتوانید خطا را گزارش کنید. برای مثال، با کد نمونه، پیام Logcat چاپ می‌شود که شبیه به موارد زیر است:

Hello World -- From line 82 of http://www.example.com/hello.html