Как отлаживать JavasScript и TypeScript, не затрагивая (слишком сильно) существующий код

Вход в JavaScript довольно прост, и есть много редакторов, помогающих на этапе отладки вашего кода, вы можете установить точку останова или, что еще лучше, условные точки останова, например, в Chrome.

Но иногда вы все же хотите зарегистрировать параметр определенной функции стрелки. Проблема в том, что общий подход требует переписать часть вашего кода, поскольку стрелочная функция подразумевает, что только возвращаемое значение находится внутри круглых скобок. Другие инструкции или задания сломают ваш код.

Так, например, если у меня есть такая функция, как:

const doubleValue= (x) => (2*x)

Если я хочу записать значение x перед возвратом значения, мне нужно настроить код, например:

Приведенный выше пример действительно тривиален, но как насчет чего-то более конкретного, например регистрации одного свойства объекта?

const f = ({a,b,c}) => { console.log(a); return {a,b,c});

А как насчет другого сценария, такого как функциональный компонент в React JS, в котором вы хотите проверить определенный реквизит, и вам снова приходится бороться с несколькими фигурными скобками?

Ну, я нашел менее болезненный способ, который не требует переписывания, просто правильно добавляя console.log, ну, это немного сложно, если честно.

Для приведенного выше примера:

const doubleValue= (x) => !console.log(x) && (2*x)
const f1 = ({ a, b, c }) => !console.log(a) && { a, b, c };

И в сценарии React JS:

const UserComponent = (props) => (
  <h1>{`Hello ${props.name} ${props.surname}`}</h1>
);
const UserComponentWithLog = (props) =>
  console.log(props) || <h1>{`Hello ${props.name} ${props.surname}`}</h1>;

Так где же магия? Чтобы обеспечить нормальный поток выполнения, вам нужно добавить что-то всегда истинное, console.log() — это пустая инструкция, которая при отрицании в js становится истинной.

В примере React JS также очень легко связать условный рендеринг с тем же трюком, не затрагивая другие части кода.

Те же примеры в Codepen и в Codesanbox

Обновление: как насчет TypeScript?

В TypeScript это же условие вызовет ошибку во время компиляции, так как void не может быть вместе с логическим значением. Но вы можете легко добавить небольшую вспомогательную функцию, например:

const cl = (o: any) => { console.log(o); return true; }

Затем вы можете использовать его внутри своего кода без изменения структуры ваших операторов:

if (cl(data) && data) {
        return <div>hello with data </div>
   }

И это также можно использовать внутри условного рендеринга.

{cl(props) && translateTitle(props.title)}