JavaScript Tutorial Creating a CounterString tool in Chrome Browser Dev Tools Snippets
Tags: javascript, chrome, devtools
Published: 2019-02-28 17:37:39

---
title: JavaScript Tutorial Creating a CounterString tool in Chrome Browser Dev Tools Snippets
published: true
description: Tools do not have to be complicated, they can be simple scripts run from dev tools. This tutorial explains the writing of a CounterString tool.
tags: JavaScript, chrome, devtools
canonical: https://www.eviltester.com/blog/eviltester/2019-02-19-counterstring-snippets/
---

I often talk about automating tactically and strategically. When we automate tactically we do what it takes to get the job done for us. When we automate strategically we build for the long term.

The same is true for programming tools. We can start small and tactical and scale strategically. In this example I create a Counterstring tool.


## Counterstrings

I have written about Counterstrings before:

- [Counterstring algorithms](https://www.eviltester.com/2018/05/counterstring-algorithms.html)
- and I implemented it in my [Test Tools Hub](https://github.com/eviltester/testtoolhub)

And you can find James Bach's original writing and work on Counterstrings at [satisfice.com](http://www.satisfice.com/blog/archives/22)

Since I don't have a tool for creating Counterstrings in the Web I set out to create one.

I thought this would be a good simple tutorial for JavaScript, tactical tooling and eventually strategic tooling (by converting it into a Chrome extension).

A Counterstring is a string like this `*3*5*7*9*12*15*` where the `*` represent the position in the string of the number immediately proceeding it.

## How to write it?

Chrome has "Snippets"

- right click, inspect
- in  Sources select the "Snippets" tab
- create a `+ New Snippet`

This is a built in JavaScript Editor within your browser.

To see it work type into the snippet:

~~~~~~~~
console.log("hello");
~~~~~~~~

Click the play icon, and your script should run and you'll see `"hello"` written to the console.

To create a Counterstring tool start by creating a function:

~~~~~~~~
function getCounterString(count){
    console.log("hello");
}
~~~~~~~~

If you run this, nothing will happen.

But after running it, if you type into the console `getCounterString(5)` you should see `"hello"` written to the console.

We will make it output a counterstring.

## Counterstring generation function

~~~~~~~~
function getCounterString(count){
    
    var counterString = "";

    while(count>0){

        var appendThis = "*" + count.toString().split("").reverse().join("");
        
        if(appendThis.length>count){
            appendThis = appendThis.substring(0,count);
        }    

        counterString = counterString + appendThis;

        count = count - appendThis.length;
    }

    return counterString.split("").reverse().join("");
}
~~~~~~~~

If you run this, nothing will happen.

But after running it, if you type into the console `getCounterString(5)` you should see `"*3*5*"` written to the console.

## How does it work?

Declare a function called `getCounterString` which takes one parameter called `count`. That is how we are able to specify the length of the counterstring we want when we call the function `getCounterString(5)`

~~~~~~~~
function getCounterString(count){
~~~~~~~~

Create a String variable which we will build the counterString in:

~~~~~~~~
    var counterString = "";
~~~~~~~~    

We need to loop around all the values in the counterstring e.g. 5, 3, and 1. So I will decrease the count as we process the values and I'll use a `while` loop to do this e.g. while count is greater than 0, keep building the counterstring.


~~~~~~~~
    while(count>0){
~~~~~~~~

Each time I process a count value I will create a string like `"*5"` or `"*3"` I will append this to the `counterString`. But I can't just write `"*13"` because I'm going to reverse the string later so I reverse the number as I create it e.g `"*31"` which would be reversed and read from left to right as `"13*"`. The way I reverse a string in JavaScript is to `.split("").reverse().join("")` which uses `split` to convert it to an array, `reverse` to reverse it then `join` to convert the array back to a String.

~~~~~~~~
        var appendThis = "*" + count.toString().split("").reverse().join("");
~~~~~~~~        
        
Another complication is that I can't just add the number to the String otherwise I'll end up with `"1*"` as my 1 character string, and it isn't it is two characters. So if the String I want to append is greater than the number of characters left then I only want a part of that string, e.g. a substring.

~~~~~~~~        
        if(appendThis.length>count){
            appendThis = appendThis.substring(0,count);
        }    
~~~~~~~~

Then I append my number String to the counterstring.

~~~~~~~~
        counterString = counterString + appendThis;
~~~~~~~~

Then I decrement 'count' by the number of characters I just added to the counterstring.

~~~~~~~~
        count = count - appendThis.length;
~~~~~~~~

Then I continue the while loop if `count` still has characters to process.

~~~~~~~~        
    }
~~~~~~~~

Then, finally, I return the reversed counterString.
    
~~~~~~~~
    return counterString.split("").reverse().join("");
}
~~~~~~~~

## Refactoring

Since I have repeated code `.split("").reverse().join("")` I create a `reverseString` method

~~~~~~~~
function reverseString(reverseMe){
    return reverseMe.split("").reverse().join("");
}
~~~~~~~~

Which I would call in my `getCounterString` function by:

~~~~~~~~
var appendThis = "*" + reverseString(count.toString());
~~~~~~~~

And

~~~~~~~~
return reverseString(counterString);
~~~~~~~~

This would give me a `getCounterString` function which I could run from the console, and I could then copy and paste the counterstring - a very basic tool.

## Easier to use

~~~~~~~~
var count = window.prompt("Counterstring Length?", "100");
var counterString = getCounterString(count);
console.log(counterString);
~~~~~~~~

The above code creates an input dialog and asks me "Counterstring Length?", and I can enter the length I want. It stores the value I enter into a variable called `count` which it then uses to call the `getCounterString` method.

And I print the generated Counterstring to the console, using `console.log` to make it easier to copy and paste.

## Even easier to use

I can manipulate the DOM, i.e. the Web Page, from JavaScript.

And if I select an input field before running the script then the I can use `document.activeElement` to find the input field that I selected and can set the value of that field.

~~~~~~~~
document.activeElement.value=counterString;
~~~~~~~~

If I select an input field, and then run the snippet then the counterstring should be added to the input.

Note: this bypasses HTML max length attribute controls since it injects the text directly into the field Value, and doesn't type the keys.

## Video

I've created a video showing all this in action:

{% youtube l4D3MGg2iMI %}


## Code

And you can find the source code on Github.

- [github.com/eviltester/counterstringjs/blob/master/snippets/counterstring.js](https://github.com/eviltester/counterstringjs/blob/master/snippets/counterstring.js)

Originally posted on [EvilTester.com](https://www.eviltester.com/blog/eviltester/2019-02-19-counterstring-snippets/)