تصحيح الأخطاء باستخدام سجلّات وحدة تحكّم JavaScript

يوضّح هذا المستند طرقًا مختلفة لعرض سجلّات وحدة تحكّم JavaScript من أجل تصحيح أخطاء المحتوى في WebView.

يتيح لك الوصول إلى وحدة تحكّم JavaScript عرض الأخطاء والتحذيرات والرسائل المخصّصة من عبارات console.log() في JavaScript لتشخيص ما يحدث داخل WebView. هناك ثلاث طرق مختلفة لعرض رسائل وحدة تحكّم JavaScript التي تم إنشاؤها بواسطة WebView:

• أدوات مطوّري البرامج في Chrome: ربط WebView بأدوات مطوّري البرامج في Chrome افتح علامة التبويب وحدة التحكّم للاطّلاع على رسائل وحدة تحكّم JavaScript في WebView.

• تطبيق "أدوات مطوري البرامج في WebView": استخدِم تطبيق "أدوات مطوري البرامج في WebView" لتفعيل العلامة webview-log-js-console-messages على جهازك من أجل عرض سجلات وحدة التحكّم في Logcat.

• اعتراض الرسائل: اعترض رسائل وحدة تحكّم JavaScript من خلال تنفيذ onConsoleMessage() في WebChromeClient. يتم توضيح هذا الأسلوب بالتفصيل في القسم التالي.

إذا كنت تعرض المحتوى من خادم ويب محلي على جهاز التطوير، راجِع الوصول إلى خادم تطوير محلي من WebView للتعرّف على كيفية الاتصال به من جهاز أو محاكي.

اعتراض الرسائل باستخدام onConsoleMessage()

تتوفّر واجهات برمجة التطبيقات الخاصة بوحدة التحكّم عند تصحيح أخطاء WebView. يجب توفير WebChromeClient ينفّذ الإجراء onConsoleMessage() حتى تظهر رسائل وحدة التحكّم في Logcat. بعد ذلك، طبِّق WebChromeClient على WebView باستخدام setWebChromeClient().

‫WebChromeClient هي فئة المساعد لـ WebView. يتعامل هذا الصف مع الأحداث المرتبطة بواجهة المستخدم التي تحدث في محتوى الويب، مثل عرض تنبيهات JavaScript وتغيير عنوان صفحة الويب ومعالجة الرسائل المُرسَلة إلى وحدة تحكّم المتصفّح.

يضبط الرمز التالي WebChromeClient لاعتراض نواتج وحدة تحكّم JavaScript وإعادة توجيهها إلى 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