ניפוי באגים באמצעות יומנים של לוח JavaScript

במסמך הזה מתוארות שיטות שונות לצפייה ביומני המסוף של JavaScript כדי לנפות באגים בתוכן בתוך WebView.

גישה למסוף JavaScript מאפשרת לכם לראות שגיאות, אזהרות והודעות מותאמות אישית מהצהרות JavaScript console.log() כדי לאבחן מה קורה בתוך WebView. יש שלוש דרכים שונות להציג הודעות של לוח JavaScript שנוצרות על ידי WebView:

• כלי הפיתוח ל-Chrome: חיבור WebView לכלי הפיתוח ל-Chrome. פותחים את הכרטיסייה Console כדי לראות את ההודעות של לוח JavaScript ב-WebView.

• אפליקציית כלי הפיתוח של WebView: משתמשים באפליקציית כלי הפיתוח של WebView כדי להפעיל את הדגל webview-log-js-console-messages במכשיר, וכך לצפות ביומני המסוף ב-Logcat.

• יירוט הודעות: אפשר ליירט הודעות של לוח JavaScript באמצעות הטמעה של onConsoleMessage() ב-WebChromeClient. הגישה הזו מוסברת בפירוט בקטע הבא.

אם אתם מציגים תוכן משרת אינטרנט מקומי במכונת הפיתוח, כדאי לעיין במאמר גישה לשרת פיתוח מקומי מ-WebView כדי ללמוד איך להתחבר אליו ממכשיר או מאמולטור.

יירוט הודעות באמצעות onConsoleMessage()

ממשקי ה-API של המסוף נתמכים כשמבצעים ניפוי באגים ב-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 או לבצע פעולות מתאימות אחרות.

כשמריצים method של מסוף בדף אינטרנט, מערכת Android קוראת ל-method‏ onConsoleMessage(ConsoleMessage) כדי שתוכלו לדווח על השגיאה. לדוגמה, עם הקוד לדוגמה, מודפסת הודעה ב-Logcat שנראית כך:

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