DevTools: Console log filter has gotten slow
Reported by
grant.ki...@gmail.com,
Nov 10 2017
|
||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36 Steps to reproduce the problem: 1. Go to this page: https://jsbin.com/weqikekoxo/edit?js,output 2. Open console, 'click run with js' button 3. Try to search for the log, notice the search is laggy 4. Click 'run with js' again, lagginess gets worse What is the expected behavior? Search should not lag. What went wrong? Devtools filter performance got worse. Not sure if this is specific to console.warn or just general decrease of filtering in general, but can recreate with the link in steps above. Video of issue occurring attached. Did this work before? N/A Chrome version: 61.0.3163.100 Channel: n/a OS Version: OS X 10.11.6 Flash Version:
,
Nov 10 2017
Bisect info: 408536 (good) - 408548 (bad) https://chromium.googlesource.com/chromium/src/+log/2f6234f4..f357e963?pretty=fuller Suspecting r408545 - 17575d9fed8e88bbc74c926e6dd037681b062b1e "[DevTools] Show stack for console.warn messages" Landed in 54.0.2811.0
,
Nov 10 2017
,
Nov 10 2017
Thanks for the report. I can't tell when keys are pressed in the video, but I can reproduce the lag while typing on Chrome stable. I don't believe this is specific to console.warn(), swapping it out with console.error() is still slow for me. We recently landed a patch on M64 Canary that should prevent the DevTools UI from freezing up while typing in the filter bar [1], so at least typing will be fast. However, we haven't yet tackled the speed of searching, which I can look further into. [1] https://chromium.googlesource.com/chromium/src/+/141dc988cf35729c75904c627e67a2a750590f67
,
Nov 11 2017
Stacktraces are added to warning and error so both are affected.
,
Nov 11 2017
matchesFilterText [1] seems to contribute the most to the lag due to repeated node traversal. I think it could cache the text at least until "blur" event on the filter input element. [1]: https://cs.chromium.org/chromium/src/third_party/WebKit/Source/devtools/front_end/console/ConsoleViewMessage.js?l=886&rcl=1af739e0c481f9bd50f8a3e2b5d928a8e2043ece matchesFilterText(filter) { var text = this.contentElement().deepTextContent(); return text.toLowerCase().includes(filter.toLowerCase()); }
,
Dec 8 2017
|
||||||||
►
Sign in to add a comment |
||||||||
Comment 1 by nyerramilli@chromium.org
, Nov 10 2017