Dev Log

Development logging is a powerful tool helping a developer to get what happens inside the lib core. To enable it, the datasource must have the devSettings property:

const datasource = new Datasource({
  get,
  settings,
  devSettings: {
    debug: true
  }
});

Note, the vscroll itself does not have a Datasource factory, and in order to get it, the makeDatasource method should be used:

import { makeDatasource } from './vscroll';

const Datasource = makeDatasource();

Along with debug setting there are also immediateLog, logTime and logProcessRun development settings, which are described in the source code. For example, if logging affects the performance, you may disallow immediate logging by setting immediateLog to false, and force the log output by calling Adapter.showLog() method exactly when you need it.

Below is an example of the simplest initialization log.

At the top of the log we see versions and settings data. Then the Workflow cycles and inner loops appear. Each Workflow cycle is a sequence of uninterrupted asynchronous actions triggered by the Scroller's engine. The Adapter.isLoading property is false only if we are not inside the WF cycle. The WF cycle consists of 1 and more inner loops. In our sample we have 1 WF cycle consisting of 3 inner loops. Each inner loop performs regular operations in a strict sequence, such as

• fetching new items via Datasource,
• rendering new items,
• clipping items that are out of view,
• adjusting the scroll position.

There is a doc presenting the Workflow and all its internal processes in diagrams based on the source code: VScroll Workflow. The dev log follows the Workflow run and marks important points: how many items are to be fetched, how many items are resolved, how rendering affects the template, how the viewport params are adjusted, etc. The dev log highlights problems, and it can sometimes be faster and more efficient to look at it than to debug the app in runtime.