{"id":588,"date":"2021-05-25T07:00:00","date_gmt":"2021-05-25T06:00:00","guid":{"rendered":"https:\/\/eocanha.org\/blog\/?p=588"},"modified":"2021-05-04T18:28:35","modified_gmt":"2021-05-04T17:28:35","slug":"gstreamer-webkit-debugging-by-using-external-tools-2-2","status":"publish","type":"post","link":"https:\/\/eocanha.org\/blog\/2021\/05\/25\/gstreamer-webkit-debugging-by-using-external-tools-2-2\/","title":{"rendered":"GStreamer WebKit debugging by using external tools (2\/2)"},"content":{"rendered":"\n<p>This is the last post of the series showing interesting debugging tools, I hope you have found it useful. Don&#8217;t miss the custom scripts at the bottom to process GStreamer logs, help you highlight the interesting parts and find the root cause of difficult bugs. Here are also the previous posts of the series:<\/p>\n\n\n\n<ul id=\"block-b42f86ed-cff9-42e2-b084-bd3cfb76f92c\"><li><a href=\"https:\/\/eocanha.org\/blog\/2021\/04\/13\/gstreamer-webkit-debugging-tricks-using-gdb-1-2\/\">GStreamer WebKit debugging tricks using GDB (1\/2)<\/a><\/li><li><a href=\"https:\/\/eocanha.org\/blog\/2021\/04\/20\/gstreamer-webkit-debugging-tricks-using-gdb-2-2\/\">GStreamer WebKit debugging tricks using GDB (2\/2)<\/a><\/li><li><a href=\"https:\/\/eocanha.org\/blog\/2021\/04\/27\/gstreamer-webkit-debugging-by-instrumenting-source-code-1-3\/\">GStreamer WebKit debugging by instrumenting source code (1\/3)<\/a><\/li><li><a href=\"https:\/\/eocanha.org\/blog\/2021\/05\/04\/gstreamer-webkit-debugging-by-instrumenting-source-code-2-3\/\">GStreamer WebKit debugging by instrumenting source code (2\/3)<\/a><\/li><li><a href=\"https:\/\/eocanha.org\/blog\/2021\/05\/11\/gstreamer-webkit-debugging-by-instrumenting-source-code-3-3\/\">GStreamer WebKit debugging by instrumenting source code (3\/3)<\/a><\/li><li><a href=\"https:\/\/eocanha.org\/blog\/2021\/05\/18\/gstreamer-webkit-debugging-by-using-external-tools-1-2\/\">GStreamer WebKit debugging by using external tools (1\/2)<\/a><\/li><\/ul>\n\n\n\n<h2>How to debug pkgconfig<\/h2>\n\n\n\n<p>When <code>pkg-config<\/code> finds the <code>PKG_CONFIG_DEBUG_SPEW<\/code> env var, it explains all the steps used to resolve the packages:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">PKG_CONFIG_DEBUG_SPEW=1 \/usr\/bin\/pkg-config --libs x11<\/pre>\n\n\n\n<p>This is useful to know why a particular package isn&#8217;t found and what are the default values for <code>PKG_CONFIG_PATH<\/code> when it&#8217;s not defined. For example:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">Adding directory '\/usr\/local\/lib\/x86_64-linux-gnu\/pkgconfig' from PKG_CONFIG_PATH\nAdding directory '\/usr\/local\/lib\/pkgconfig' from PKG_CONFIG_PATH\nAdding directory '\/usr\/local\/share\/pkgconfig' from PKG_CONFIG_PATH\nAdding directory '\/usr\/lib\/x86_64-linux-gnu\/pkgconfig' from PKG_CONFIG_PATH\nAdding directory '\/usr\/lib\/pkgconfig' from PKG_CONFIG_PATH\nAdding directory '\/usr\/share\/pkgconfig' from PKG_CONFIG_PATH<\/pre>\n\n\n\n<p>If we have tuned <code>PKG_CONFIG_PATH<\/code>, maybe we also want to add the default paths. For example:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">SYSROOT=~\/sysroot-x86-64\nexport PKG_CONFIG_PATH=${SYSROOT}\/usr\/local\/lib\/pkgconfig:${SYSROOT}\/usr\/lib\/pkgconfig\n# Add also the standard pkg-config paths to find libraries in the system\nexport PKG_CONFIG_PATH=${PKG_CONFIG_PATH}:\/usr\/local\/lib\/x86_64-linux-gnu\/pkgconfig:\\\n\/usr\/local\/lib\/pkgconfig:\/usr\/local\/share\/pkgconfig:\/usr\/lib\/x86_64-linux-gnu\/pkgconfig:\\\n\/usr\/lib\/pkgconfig:\/usr\/share\/pkgconfig\n# This tells pkg-config where the \"system\" pkg-config dir is. This is useful when cross-compiling for other\n# architecture, to avoid pkg-config using the system .pc files and mixing host and target libraries\nexport PKG_CONFIG_LIBDIR=${SYSROOT}\/usr\/lib\n# This could have been used for cross compiling:\n#export PKG_CONFIG_SYSROOT_DIR=${SYSROOT}<\/pre>\n\n\n\n<h2>Man in the middle proxy for WebKit<\/h2>\n\n\n\n<p>Sometimes it&#8217;s useful to use our own modified\/unminified files with a 3rd party service we don&#8217;t control. <a href=\"https:\/\/mitmproxy.org\/\">Mitmproxy<\/a> can be used as a man-in-the-middle proxy, but I haven&#8217;t tried it personally yet. What I have tried (with WPE) is this:<\/p>\n\n\n\n<ol><li>Add an <code>\/etc\/hosts<\/code> entry to point the host serving the files we want to change to an IP address controlled by us.<\/li><li>Configure a web server to provide the files in the expected path.<\/li><li>Modify the <a href=\"https:\/\/github.com\/WebKit\/WebKit\/blob\/main\/Source\/WebCore\/platform\/network\/ResourceRequestBase.h#L215\">ResourceRequestBase constructor<\/a> to change the HTTPS requests to HTTP when the hostname matches the target:<\/li><\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">ResourceRequestBase(const URL&amp; url, ResourceRequestCachePolicy policy)\n    : m_url(url)\n    , m_timeoutInterval(s_defaultTimeoutInterval)\n    ...\n    , m_isAppBound(false)\n{\n    if (m_url.host().toStringWithoutCopying().containsIgnoringASCIICase(String(\"out-of-control-service.com\"))\n        &amp;&amp; m_url.protocol().containsIgnoringASCIICase(String(\"https\"))) {\n        printf(\"### %s: URL %s detected, changing from https to http\\n\",\n            __PRETTY_FUNCTION__, m_url.string().utf8().data()); \n        fflush(stdout);\n        m_url.setProtocol(String(\"http\"));\n    }\n}<\/pre>\n\n\n\n<p>:bulb: Pro tip: If you have to debug minified\/obfuscated JavaScript code and don&#8217;t have a deobfuscated version to use in a man-in-the-middle fashion, use http:\/\/www.jsnice.org\/ to deobfuscate it and get meaningful variable names.<\/p>\n\n\n\n<h2>Bandwidth control for a dependent device<\/h2>\n\n\n\n<p>If your computer has a &#8220;shared internet connection&#8221; enabled in Network Manager and provides access to a dependent device , you can control the bandwidth offered to that device. This is useful to trigger quality changes on adaptive streaming videos from services out of your control.<\/p>\n\n\n\n<p>This can be done using <code>tc<\/code>, the Traffic Control tool from the Linux kernel. You can use <a href=\"https:\/\/pastebin.com\/E2iVctCw\">this script<\/a> to automate the process (edit it to suit to your needs).<\/p>\n\n\n\n<h2>Useful scripts to process GStreamer logs<\/h2>\n\n\n\n<p>I use these scripts in my daily job to look for strange patterns in GStreamer logs that help me to find the cause of the bugs I&#8217;m debugging:<\/p>\n\n\n\n<ul><li><a href=\"https:\/\/github.com\/paoloantinori\/hhighlighter\"><code>h<\/code><\/a>: Highlights each expression in the command line in a different color.<\/li><li><a href=\"https:\/\/pastebin.com\/PrF2Gk2d\"><code>mgrep<\/code><\/a>: Greps (only) for the lines with the expressions in the command line and highlights each expression in a different color.<\/li><li><a href=\"https:\/\/pastebin.com\/2P6fHMS1\"><code>filter-time<\/code><\/a>: Gets a subset of the log lines between a start and (optionally) an end GStreamer log timestamp.<\/li><li><a href=\"https:\/\/pastebin.com\/fhzikUgK\"><code>highlight-threads<\/code><\/a>: Highlights each thread in a GStreamer log with a different color. That way it&#8217;s easier to follow a thread with the naked eye.<\/li><li><a href=\"https:\/\/pastebin.com\/G3fW3PGU\"><code>remove-ansi-colors<\/code><\/a>: Removes the color codes from a colored GStreamer log.<\/li><li><code>aha<\/code>: ANSI-HTML-Adapter converts plain text with color codes to HTML, so you can share your GStreamer logs from a web server (eg: for bug discussion). Available in most distros.<\/li><li><a href=\"https:\/\/pastebin.com\/1gqC6BKY\"><code>gstbuffer-leak-analyzer<\/code><\/a>: Analyzes a GStreamer log and shows unbalances in the creation\/destruction of GstBuffer and GstMemory objects.<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>This is the last post of the series showing interesting debugging tools, I hope you have found it useful. Don&#8217;t miss the custom scripts at the bottom to process GStreamer logs, help you highlight the interesting parts and find the root cause of difficult bugs. Here are also the previous posts of the series: GStreamer &hellip; <a href=\"https:\/\/eocanha.org\/blog\/2021\/05\/25\/gstreamer-webkit-debugging-by-using-external-tools-2-2\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">GStreamer WebKit debugging by using external tools (2\/2)<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[11,13,2,1,7,12],"tags":[20],"_links":{"self":[{"href":"https:\/\/eocanha.org\/blog\/wp-json\/wp\/v2\/posts\/588"}],"collection":[{"href":"https:\/\/eocanha.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eocanha.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eocanha.org\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eocanha.org\/blog\/wp-json\/wp\/v2\/comments?post=588"}],"version-history":[{"count":4,"href":"https:\/\/eocanha.org\/blog\/wp-json\/wp\/v2\/posts\/588\/revisions"}],"predecessor-version":[{"id":607,"href":"https:\/\/eocanha.org\/blog\/wp-json\/wp\/v2\/posts\/588\/revisions\/607"}],"wp:attachment":[{"href":"https:\/\/eocanha.org\/blog\/wp-json\/wp\/v2\/media?parent=588"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eocanha.org\/blog\/wp-json\/wp\/v2\/categories?post=588"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eocanha.org\/blog\/wp-json\/wp\/v2\/tags?post=588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}